如何使用bootstrap主题在dataview中设置自定义图标

时间:2015-01-03 19:30:59

标签: css icons xpages dataview

我想在xpages dataview上设置带有字形或自定义上传图标的自定义图标,但图标始终默认为文件图标。我使用bootstrap主题和最新的xpages扩展lib(r10)。

我想更改数据视图文档行中的图标,而不是分类图标。带有引导主题的代码始终默认为此代码。

<div class="glyphicon glyphicon-file xspReadIcon"></div> 

我尝试过:

<xe:iconEntry selectedValue="read" url="/legalforms.gif" styleClass="hidden-xs"></xe:iconEntry>
<xe:iconEntry selectedValue="read" url="/legalforms.gif" styleClass="glyphicons glyphicons-user"></xe:iconEntry>

2 个答案:

答案 0 :(得分:1)

您似乎在引导主题的数据视图渲染器中发现了一个错误。我们将在未来考虑解决这个问题。在此期间,您可以尝试使用下面的解决方法。

您可以通过指定xp:key="icon"来使用数据视图的图标方面。然后在构面中添加一个带有自定义styleClass的div。例如:

<xe:dataView id="dataView1">
    ....
    <xe:this.facets>
      <xp:panel xp:key="icon">
        <xp:div>
             <xp:this.styleClass>
                 <![CDATA[#{javascript:
                     var doc:NotesDocument = viewEntry.getDocument();
                     if(doc.getRead()) {
                         return "hidden-xs";
                     }else{
                        return "glyphicon glyphicon-user";
                     }
                }]]>
            </xp:this.styleClass>
        </xp:div>
      </xp:panel>
    </xe:this.facets>
</xe:dataView>

答案 1 :(得分:0)

我只是尝试了Brians解决方案,这可能对你有用,但我无法让它适用于类别图标。

无论如何,您可以通过替换加载的图标替换所有图标客户端, 您可能还需要在部分刷新时调用代码

$(function(){
$(".glyphicon-minus-sign").removeClass("glyphicon-minus-sign").addClass("glyphicon-minus")
$(".glyphicon-plus-sign").removeClass("glyphicon-plus-sign").addClass("glyphicon-plus")
})