OpenNTF ApplicationLayout 和 GlyphIcons：如何使用？

Question

我正在使用最后一个 ExtensionLibrary (v11)、主题 'bootstrap3.2.0' 和 ApplicationLayout 控件 'bootstrapResponsiveConfiguration'；我尝试在 ApplicationLinks 中使用 GlyphIcons 但没有成功：

可能吗？有人可以举个例子吗？

这是我尝试的部分代码（未返回错误）：

    <xe:this.configuration>
        <xe:bootstrapResponsiveConfiguration
            productLogo="/abc.gif"
            productLogoHeight="38px"
            titleBarName="#{javascript:sessionScope.ssCurrentApplication}"
            placeBarName="Place Bar"
            footer="false"
            legal="false"
            fixedNavbar="fixed-top"
        >
            <xe:this.bannerApplicationLinks>

                <xe:basicLeafNode
                    label="Safety"
                    submitValue="APPLSafety"
                    styleClass="glyphicon glyphicon-save"
                >
                    <xe:this.selected><![CDATA[#{javascript:isThisApplication("Safety");}]]></xe:this.selected>
                </xe:basicLeafNode>
                <xe:basicContainerNode label="Safety">
                    <xe:this.children>
                        <xe:basicLeafNode
                            submitValue="Safety Tool\By Config"
                            label="By Config"
                            styleClass="glyphicon glyphicon-save"
                        >
                            <xe:this.selected><![CDATA[#{javascript:isThisView("Safety Tool\By Config");}]]></xe:this.selected>
                        </xe:basicLeafNode>

我使用 styleClass="glyphicon glyphicon-save" 的地方是我尝试定义它的地方；怎么了？

Answer 1

是的，我认为这之前已向我们报告过，并且树节点中存在限制，不允许您正确设置样式 class。我们必须创建一个增强请求来解决这个问题。

但是，您可以使用 bootstrap 插件中的 jquery 来绕过它。这是我在为我们的 bluemix 东西开发的 xpages 样板应用程序中使用的代码片段。第一部分是一个 onClientLoad 事件，它将字形填充到应用程序布局实用程序链接中：

<xp:eventHandler event="onClientLoad" submit="false">
    <xp:this.script><![CDATA[
        $(".applayout-utility-links li:nth-child(1) a").prepend("<div style='padding-top:2px;' class='glyphicon glyphicon-home'></div>")
        $(".applayout-utility-links li:nth-child(2) a").prepend("<div style='padding-top:2px;' class='glyphicon glyphicon-th-list'></div>")
        $(".applayout-utility-links li:nth-child(3) a").prepend("<div style='padding-top:2px;' class='glyphicon glyphicon-ok'></div>")
        $(".applayout-utility-links li:nth-child(4) a").prepend("<div style='padding-top:2px;' class='glyphicon glyphicon-exclamation-sign'></div>")
        $(".applayout-utility-links li:nth-child(5) a").prepend("<div style='padding-top:2px;' class='glyphicon glyphicon-warning-sign'></div>")]]>
    </xp:this.script>
</xp:eventHandler>

另一部分是自己定义链接，您只需要提供 href 属性，如果需要，请将标签留空：

<xe:this.bannerUtilityLinks>
    <xe:basicLeafNode href="dashboard.xsp"></xe:basicLeafNode>
    <xe:basicLeafNode href="todos.xsp"></xe:basicLeafNode>
    <xe:basicLeafNode href="complete.xsp"></xe:basicLeafNode>
    <xe:basicLeafNode href="urgent.xsp"></xe:basicLeafNode>
    <xe:basicLeafNode href="overdue.xsp"></xe:basicLeafNode>
</xe:this.bannerUtilityLinks>

该代码应该适用于应用程序链接，只需将上面的 xe:this.bannerUtilityLinks 替换为 xe:this.bannerApplicationLinks。让我知道进展如何

OpenNTF ApplicationLayout 和 GlyphIcons：如何使用？

OpenNTF ApplicationLayout and GlyphIcons : how to use?

twitter-bootstrap

xpages

glyphicons