Question

如何设置xe：tabBar和xe：tabBarButton控件的样式，使其看起来像带有按钮（包括图标，文本）的“本机”页脚？

Answer 1

要让标签栏停留在页面底部，请使用Dojo ScrollablePane（dojox.mobile.ScrollablePane）。如果您使用的是Domino 9，则此窗口小部件已经可用，并且可以实现如下：

<xe:appPage
id="appPage1"
pageName="firstpage">
<xe:djxmHeading
    id="heading1"
    label="Scrollable Pane Demo">
</xe:djxmHeading>
<xp:div
    id="scrollableContent"
    dojoType="dojox.mobile.ScrollablePane">
        <xp:this.dojoAttributes>
            <xp:dojoAttribute name="fixedFooter">
                <xp:this.value><![CDATA[#{javascript:var mobFooter = getComponent("tabBar1");
return mobFooter.getClientId(facesContext);}]]></xp:this.value>
            </xp:dojoAttribute>
            <xp:dojoAttribute name="fixedHeader">
                <xp:this.value><![CDATA[#{javascript:var mobHeader = getComponent("heading1");
return mobHeader.getClientId(facesContext);}]]></xp:this.value>
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="scrollDir"
                value="v">
            </xp:dojoAttribute>
            <xp:dojoAttribute
                name="fixedHeaderHeight"
                value="54">
             </xp:dojoAttribute>
            <xp:dojoAttribute
                name="fixedFooterHeight"
                value="54">
            </xp:dojoAttribute>
        </xp:this.dojoAttributes>
    YOUR CONTENT GOES HERE
</xp:div>
<xe:tabBar
    id="tabBar1"
    barType="segmentedControl"> 
</xe:tabBar>
</xe:appPage>

页眉和页脚必须位于ScrollablePane之外，并且功能需要以下dojo属性：

fixedHeader
fixedFooter
scrollDir
fixedHeaderHeight
fixedFooterHeight

如果您正在使用Domino 8.5.3，则必须将ScrollablePane及其所有依赖项添加到您的NSF，我在博客文章here中介绍了这些依赖项。您可以找到其他文档here。

Answer 2

您需要实现dojo scrollableView或scrollablePane的版本，以使导航栏可靠地将自己定位在移动设备的底部。请注意Keith Strickland在NotesIn9上发布的视频，该视频解释了如果遇到任何麻烦，该怎么做。

使用Domino 9.0，我们在Red Pill Development中发现仅使用CSS设置NavBar样式并不能保证导航栏在每个应用程序页面转换和/或屏幕方向和/或部分刷新时始终会掉到屏幕底部。

Answer 3

目前无法使用当前的XPage移动控件集。我们已经记录了PHAN962BJ8以便将来解决这个问题。

如何将<xe：tabbar>和<xe：tabbarbutton>设置为移动设备中的页脚导航栏？</xe：tabbarbutton> </xe：tabbar>

3 个答案: