OpenNTF ApplicationLayout и GlyphIcons: как использовать?
Я использую последнюю ExtensionLibrary (v11), тему "bootstrap3.2.0" и элемент управления ApplicationLayout с "bootstrapResponsiveConfiguration"; Я пытаюсь использовать GlyphIcons в ApplicationLinks без успеха:
Является ли это возможным? Может кто-нибудь привести пример?
Это часть кода, который я пытаюсь (ошибка не возвращается):
<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", где я пытаюсь определить его; в чем дело?
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
, Дайте мне знать, как это происходит