1

我正在尝试在 Xpages Mobile 控件中获取底部标签栏。它通常是黑色的，带有深色图标，并且页面更改会让您按下图标。

我无法弄清楚如何使用实际的 Mobile Controls Tab bar 获得外观。这似乎适用于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>
4

3 回答 3

2

查看 IBM Press 第 295 页的 Extension Library 一书。关于选项卡栏的这一章包含屏幕底部的操作栏示例：

<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-14T07:58:33.960 回答
1

我正在尝试自己完成同样的事情。我怀疑这个问题是因为 XPages 移动控件还不支持移动可滚动窗格，它允许在页眉和页脚之间定位固定大小（可滚动）的内容。css 很可能会使用标签栏的绝对定位来防止它随内容滚动。但是当这完成后，您将需要实现某种形式的可滚动窗格，以阻止主要内容在工具栏上方/下方滚动。

下面的 CSS 大部分时间都可以工作，但我发现它有时不愿意捕捉到正确的位置。

.rpTabBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  height: 50px;
  margin-top: -50px;
  clear: both;
}
于 2013-03-14T22:56:50.423 回答
0

在查看了 dojo 示例后，我注意到导航栏保持固定在底部的示例使用了 scrollableView 控件。XPages appPage 控件基于标准视图控件。所有这些示例似乎都将 navBar 浮动在内容的底部。尝试了几个星期后，我明白了原因。使用此控件时，几乎不可能让导航栏粘在底部。

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

于 2013-04-16T14:02:59.677 回答