我需要自定义标准应用程序布局控件生成的输出,例如向标签添加HTML代码(例如,指定嵌套标签的fa图标):
<xe:this.configuration>
<xe:simpleResponsiveConfiguration>
<xe:this.navbarUtilityLinks>
<xe:basicLeafNode>
<xe:this.label><![CDATA[<i class="fa fa-bell">Notification(s)</i>]]></xe:this.label>
</xe:basicLeafNode>
</xe:this.navbarUtilityLinks>
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
不幸的是,显示的输出没有转义,结果是
<i class="fa fa-bell">Notification(s)</i>
而不是
通知(S)。
有没有办法为应用程序布局控件中的选项标签设置escape =“false”/“true”?
答案 0 :(得分:1)
树节点在这方面有点受限。它们的设计不能在渲染输出中添加额外的html。你曾尝试使用label属性在那里破解它,但这将永远被转义。
史蒂夫建议将fa fa-bell
设置为节点本身的styleClass。它会显示图标和文本,但会混淆标签文本的字体样式。如果你改变标签的字体,它会弄乱图标,因为它们都是同一个DOM元素的一部分。
但是,在ToDo示例应用程序(现在是ExtLib发行版的一部分)中,有一个在simpleLayout自定义控件中使用jQuery执行所需操作的示例。它在XPage的onClientLoad事件期间添加了图标。如果您重新编写该代码,可以使用它来执行您想要的操作:
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[
$(".applayout-utility-links li:nth-child(1) a").prepend("<i class='fa fa-bell' style='margin-right:5px'></i>")]]>
</xp:this.script>
</xp:eventHandler>