如何將XPages移動控件選項卡欄放置在屏幕底部？

我試圖在Xpages Mobile控件中獲取底部的選項卡欄。它通常是黑色和黑色圖標，頁面變化是你按下圖標。如何將XPages移動控件選項卡欄放置在屏幕底部？

我無法弄清楚如何使用實際的Mobile Controls Tab欄獲得外觀。這似乎適合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>

來源

2013-03-13 David Leedy

看在擴展庫本書從IBM出版社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"，它似乎只是一個分段標籤欄。

來源

2013-03-14 07:58:33

感謝！我忘記了這個例子，我認爲，因爲如果你看圖片，標籤欄並沒有像它應該「停靠」在屏幕的底部。它通過內容被推下來，甚至可能離開屏幕。有沒有辦法將它修復到底部不是嗎？它適用於Dojo示例網站... – 2013-03-14 13:59:42

同意，該示例看起來不太好。也許這只是一個修改CSS的問題？ – 2013-03-14 14:35:18

'浮動'是否允許您浮動到顯示器的底部？或者，也許有人需要發明「djxmFooting」？ – 2013-03-14 17:21:38

我正在嘗試自己完成同樣的事情。我懷疑問題是由於XPages Mobile Controls尚不支持可移動可滾動窗格，這將允許在頁眉和頁腳之間定位固定大小（可滾動）的內容。 CSS很可能會使用標籤欄的絕對位置來防止它與內容一起滾動。但是，當你已經完成了，你將需要實現某種形式的可滾動窗格，並停止主要內容在工具欄上方/下方滾動。

下面的CSS在「大部分」時間內工作，但我發現它有時不願意抓住正確的位置。

.rpTabBar { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    z-index: 999; 
    height: 50px; 
    margin-top: -50px; 
    clear: both; 
}

來源

2013-03-14 22:56:50

我已經登錄了一個增強請求並通過PHAN962BJ8跟蹤它 – 2013-03-22 09:23:33

如果您的位置更加一致添加一個onPageLoad事件，該事件將div的位置設置爲bottom = 0，但當導航欄不顯示或被推到頁面上時，仍然有太多次。方向更改觸發它移動到正確的位置，但我不能以編程方式強制它始終顯示爲CSS規定它應該。 – 2013-04-16 15:19:05

看完dojo的例子後，我注意到navbar剩下的例子使用了scrollableView控件。 XPages appPage控件基於標準視圖控件。所有這些示例似乎都在內容的基礎上具有navBar浮點數。經過幾個星期的嘗試，我明白了原因。在使用此控件時，似乎幾乎不可能讓navBar堅持到底部。

我們還沒有找到一種方法來實現scrollableView沒有扔掉所有的Xpages移動控件。相反，我們在實現dojo scrollablePane的每個appPage內創建一個div。使用這個，我們可以爲一個固定頭和一個固定頁腳提供控制ID。 navBar現在很好地貼在每一頁的底部。

來源

2013-04-16 14:02:59

如何將XPages移動控件選項卡欄放置在屏幕底部？

回答

相關問題