Как поставяте лентата с раздели за мобилни контроли XPages в долната част на екрана?

Опитвам се да получа долна лента с раздели в контролите на Xpages Mobile. Обикновено е черен с тъмни икони и промяната на страницата трябва да натиснете икона.

Не можах да разбера как да получа външния вид и усещането с действителната лента с раздели за управление на мобилни устройства. Това изглежда насочено към 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
Per - Благодаря! Мисля, че забравих за този пример, защото ако погледнете снимката, лентата с раздели не се закача към долната част на екрана, както би трябвало. Той се натиска надолу чрез съдържание и може дори да изчезне от екрана. Трябва да има начин да го фиксирате до дъното, нали? Работи на сайта за пример на Dojo... - 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 Mobile Controls все още не поддържат Mobile Scrollable Pane, което би позволило позиционирането на съдържание с фиксиран размер (с възможност за превъртане) между горния и долния колонтитул. 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 на bottom=0, но все още има твърде много пъти, когато лентата за навигация не се появява или се избутва нагоре в страницата. Промяната на ориентацията задейства преместването му на правилното място, но не мога програмно да го принудя винаги да се показва, както диктува CSS. - person Peter Presnell; 16.04.2013

arrow_upward
0
arrow_downward

След като разгледах примерите за доджо, забелязах, че примерите на навигационната лента остават фиксирани в долната част, използват контролата scrollableView. Контролата XPages appPage се основава на стандартната контрола за изглед. Всички тези примери изглежда имат навигационната лента в основата на съдържанието. След няколко седмици опити виждам защо. Изглежда почти невъзможно да накарате лентата за навигация да залепне на дъното, когато използвате този контрол.

Все още не сме намерили начин да внедрим scrollableView, без да изхвърляме всички мобилни контроли на Xpages. Вместо това създадохме div във всяка appPage, който имплементира dojo scrollablePane. Използвайки това, можем да предоставим контролни идентификатори за фиксиран горен и фиксиран долен колонтитул. И лентата за навигация вече се залепва добре в долната част на всяка страница.

person Peter Presnell    schedule 16.04.2013