如何将 XPages 移动控件选项卡栏放置在屏幕底部？答案

【问题标题】：How do you place the XPages mobile controls Tab Bar at the bottom of the screen?如何将 XPages 移动控件选项卡栏放置在屏幕底部？
【发布时间】：2013-03-13 21:35:35
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： xpages dojo xpages-extlib

【解决方案1】：

查看第 295 页的 IBM Press 的 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"，它似乎只是一个分段标签栏。

【讨论】：

每 - 谢谢！我忘记了我认为的那个例子，因为如果你看图片，标签栏不会像它应该的那样“停靠”到屏幕底部。它通过内容被下推，甚至可能从屏幕上消失。总有办法把它固定到底部不是吗？它适用于 Dojo 示例网站...
同意，这个例子看起来不太好。也许只是修改CSS的问题？
“浮动”是否允许您浮动到显示的底部？或者也许有人需要发明“djxmFooting”？
我尝试了一些 CSS 的东西......谷歌搜索“粘性页脚”。我什么也做不了。那可能是我做错了，但我认为它不起作用，因为它在移动控件内部，这把它搞砸了。我确实在 Dojo 中看到了一些关于底部的引用：fixed 或类似的东西，但仍然没有让它工作的运气......

【解决方案2】：

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

以下 CSS 在“大部分”情况下都能正常工作，但我发现它有时不愿意捕捉到正确的位置。

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

【讨论】：

我记录了一个增强请求并通过 PHAN962BJ8 对其进行跟踪
如果你添加一个 onPageLoad 事件将 div 的位置设置为 bottom=0，那么放置会更加一致，但仍然有太多次导航栏没有出现或被推到页面上。方向更改会触发它移动到正确的位置，但我不能以编程方式强制它始终按照 CSS 的要求显示。

【解决方案3】：

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

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

【讨论】：