修改primefaces rowToggler的图像答案

【问题标题】：Modify image of primefaces rowToggler修改primefaces rowToggler的图像
【发布时间】：2012-02-06 01:53:29
【问题描述】：

我需要修改 primefaces rowToggler 的图像。这就是我在 css 文件中尝试的内容：

.ui-datatable .ui-row-toggler {
   cursor: pointer;
   background-image: url("/resources/images/expand.jpg") ; 
}

我还尝试将 url 更改为 /images/expand.jpg、images/expand.jpg 和简单的 expand.jpg。但他们都没有找到图像。

我错过了什么？

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

这是一个旧线程：添加答案以防其他人在 Google 上找到此问题。问题来自这样一个事实，即用于添加图标的类被硬编码（参见the source code）当行折叠时是类ui-icon-circle-triangle-e，当行展开时是ui-icon-circle-triangle-s。因此，这样做的方法是覆盖样式表中这些类的定义。这对我有用：

.ui-icon-circle-triangle-e {
    background-image: url('../images/triangleRight.png') !important;
    background-position: 0px 0px;   
}

.ui-icon-circle-triangle-s {
    background-image: url('../images/triangleDown.png') !important;
    background-position: 0px 0px;
}

默认设置看起来太像简单的要点——用户忽略了它们是可点击的。

【讨论】：

【解决方案2】：

    <script type="text/javascript">
    /*<![CDATA[*/
        $(document).on("click", ".ui-icon-circle-triangle-e", function() {
            $(this).css({
                background: 'url(#{request.contextPath}/images/data/silm.gif)'
            });

        });
    /*]]>*/
    </script>

    <style type="text/css">
        .ui-datatable .ui-row-toggler {
            cursor: pointer;
            background: url(#{request.contextPath}/images/data/eklem.gif) ; 
        } 
    </style>

【讨论】：

【解决方案3】：

根据您提供的信息，很可能是因为您在“localhost/APP_NAME/”上运行了一个应用程序，当您执行“/resources/...”时，它指向“localhost/resources/...”不存在（它应该解析为“localhost/APP_NAME/resources/...”。

试试这个而不是 url（它的 JSF 特定）

url("#{resource['images:expand.jpg']}")

【讨论】：

其实我觉得这个问题是rowToggler特有的。当我查看源代码时，无论我指定的网址如何，我都找不到 expand.jpg。相反，这是在 html 中打印的内容：

【解决方案4】：

如果您将图像放在项目的resources 文件夹中，您应该像这样访问它：

.ui-datatable .ui-row-toggler {
   cursor: pointer;
   background-image: url("../javax.faces.resource/expand.jpg.xhtml?ln=images/") ; 
}

神奇的公式应该是

../javax.faces.resource/<file-name>.xhtml?ln=<path-to-the-folder>/

所以如果你的图片位于/resources/car/bmw/series7.jpg，你应该使用../javax.faces.resource/series7.jpg.xhtml?ln=car/bmw/访问它

【讨论】：

可能并不总是有效，具体取决于当前页面所在的位置。如果它位于“a/b/c/d.jsf”，那么这将不起作用。
:P 是的，他可能需要根据级别进行更改。但他应该能够大致了解它
其实我觉得这个问题是rowToggler特有的。当我查看源代码时，无论我指定的网址如何，我都找不到 expand.jpg。相反，这是在 html 中打印的内容：
转到您之前的问题，我确实告诉过您 rowToggler 具有更改其样式类的属性。你应该使用它
你在哪里找到这个属性？是样式还是样式类？我试着寻找标签参考，但那里没有提到。