Как разместить панель вкладок мобильных элементов управления XPages внизу экрана?

Я пытаюсь получить нижнюю панель вкладок в элементах управления Xpages Mobile. Обычно он черный с темными значками, а при изменении страницы вы нажимаете значок.

Я не мог понять, как получить внешний вид с фактической панелью вкладок Mobile Controls. Кажется, это больше подходит для segmentedTabBar, чем для стандартной панели вкладок. Я попытался получить доступ к Dojo вручную с помощью приведенного ниже кода, и я получил внешний вид, но панель вкладок отображается вверху, а не внизу экрана.

Я бы предпочел использовать версию с мобильным управлением, но, тем не менее, мне легко. Я бы хотел, чтобы нижняя панель вкладок работала в XPages.

Любой совет будет принят во внимание.

<xe:singlePageApp id="singlePageApp1" selectedPageName="home">


<xe:appPage id="appPage1" pageName="home">

    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"/Add_32x32.png",
                   selected:true'>
        Featured
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"/1_48x48.png"'>
        Categories
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"1_48x48.png"'>
        Top 25
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"Add_32x32.png"'>
        Search
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"1_48x48.png"'>
        Updates
    </li>
</ul>

</xe:appPage></xe:singlePageApp></xp:view>

dojo xpages xpages-extlib
person David Leedy    schedule 13.03.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Посмотрите книгу Extension Library от IBM Press на стр. 295. Эта глава, посвященная панели вкладок, содержит пример панели действий в нижней части экрана:

<xe:tabBar id="tabBar1">
  <xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
  <xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
  <xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>

Это выглядит как сегментированная панель вкладок, только если вы используете barType="segmentedControl".

person Per Henrik Lausten    schedule 14.03.2013
comment
Пер - Спасибо! Я забыл об этом примере, я думаю, потому что, если вы посмотрите на картинку, панель вкладок не прикрепляется к нижней части экрана, как должна. Он проталкивается через контент и может даже исчезнуть с экрана. Должен же быть способ прикрепить его к днищу, не так ли? Он работает на сайте Dojo Example... - person David Leedy; 14.03.2013
comment
Согласитесь, пример неудачный. Возможно, это просто вопрос изменения CSS? - person Per Henrik Lausten; 14.03.2013
comment
Позволяет ли «поплавок» плавать в нижней части дисплея? А может кому надо придумать djxmFooting? - person David Navarre; 14.03.2013
comment
Я попробовал кое-что из CSS... погуглил для липкого нижнего колонтитула. Я ничего не мог заставить работать. Возможно, я делаю это неправильно, но я думаю, что это не работает, потому что это внутри мобильных элементов управления, и это все портит. Я видел некоторые ссылки в Dojo на дно: исправлено или что-то в этом роде, но все равно не удалось заставить его работать... - person David Leedy; 14.03.2013

arrow_upward
1
arrow_downward

Я сам пытаюсь сделать то же самое. Я подозреваю, что проблема вызвана тем, что мобильные элементы управления XPages еще не поддерживают мобильную прокручиваемую панель, которая позволяла бы размещать содержимое фиксированного размера (прокручиваемое) между заголовком и нижним колонтитулом. CSS, скорее всего, будет использовать абсолютное позиционирование панели вкладок, чтобы предотвратить ее прокрутку вместе с содержимым. Но когда это будет сделано, вам понадобится реализовать какую-либо форму прокручиваемой панели, чтобы предотвратить прокрутку основного содержимого над/под панелью инструментов.

Следующий CSS работает «большую часть» времени, но я обнаружил, что иногда он не хочет привязываться к правильному месту.

.rpTabBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  height: 50px;
  margin-top: -50px;
  clear: both;
}
person Peter Presnell    schedule 14.03.2013
comment
Я зарегистрировал запрос на улучшение и отслеживаю его через PHAN962BJ8. - person Paul Hannan; 22.03.2013
comment
Размещение будет немного более последовательным, если вы добавите событие onPageLoad, которое устанавливает позицию div в нижнее положение = 0, но все еще слишком много раз, когда панель навигации не появляется или перемещается вверх по странице. Изменение ориентации вызывает его перемещение в правильное место, но я не могу программно заставить его всегда отображаться так, как диктует CSS. - person Peter Presnell; 16.04.2013

arrow_upward
0
arrow_downward

Посмотрев на примеры додзё, я заметил, что в примерах с фиксированной панелью навигации внизу используется элемент управления scrollableView. Элемент управления appPage XPages основан на стандартном элементе управления представлением. Кажется, что во всех этих примерах плавающий элемент navBar находится в основе содержимого. Попробовав несколько недель, я понимаю, почему. Кажется почти невозможным заставить navBar прилипнуть к нижней части при использовании этого элемента управления.

Мы еще не нашли способ реализовать scrollableView, не отказываясь от всех мобильных элементов управления Xpages. Вместо этого мы создали div внутри каждого appPage, который реализует прокручиваемую панель dojo. Используя это, мы можем предоставить идентификаторы элементов управления для фиксированного заголовка и фиксированного нижнего колонтитула. И navBar теперь красиво прикрепляется внизу каждой страницы.

person Peter Presnell    schedule 16.04.2013