Question

我使用的是最后一个ExtensionLibrary（v11），主题＆＃39; bootstrap3.2.0＆＃39;和ApplicationLayout控件使用＆＃39; bootstrapResponsiveConfiguration＆＃39 ;; 我试图在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 =＆＃34; glyphicon glyphicon-save＆＃34; 是我尝试定义它的地方;什么错了？

Answer 1

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

但是，您可以使用作为引导程序插件一部分的jquery来解决它。这是我在xpages样板应用程序中使用的代码片段，我们正在为我们的bluemix内容开发。第一部分是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：如何使用？

1 个答案: