Question

我正在尝试在Xpages Mobile控件中获得底部标签栏。它通常是黑色的，带有黑色图标，页面更改时你会按下一个图标。

我无法弄清楚如何通过实际的Mobile Controls标签栏来获得外观和感觉。这似乎适合segmentedTabBar而不是我猜标准的Tab吧。我尝试使用下面的代码手动访问Dojo，我得到了外观，但标签栏显示在屏幕的顶部而不是底部。

我宁愿使用移动控件版本，但不管我多么容易。我很想在XPage中使用底部标签栏。

任何建议都将受到赞赏。

<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>

Answer 1

请查看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"，它似乎只是一个细分的标签栏。

Answer 2

我正试图自己完成同样的事情。我怀疑这个问题是由于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;
}

Answer 3

在查看了dojo示例后，我注意到导航栏的示例仍然固定在底部，使用了scrollableView控件。 XPages appPage控件基于标准视图控件。所有这些示例似乎都将navBar float放在内容的基础上。尝试几周后，我明白为什么。使用此控件时，似乎几乎不可能让navBar坚持到底部。

我们还没有找到一种方法来实现scrollableView而不丢弃所有的Xpages移动控件。相反，我们在每个appPage中创建了一个实现dojo scrollablePane的div。使用此方法，我们可以为固定页眉和固定页脚提供控件ID。现在，navBar很好地贴在了每一页的底部。

如何将XPage移动控件Tab Bar放在屏幕底部？

3 个答案: