HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 需要帮助才能在命令按钮中显示图标图像大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
只是一个基本需求,但无法让它工作.
我想有一个primefaces按钮来显示我的图像,没有任何文字.

但我得到的是一个只包含^字符的按钮,不显示图像,只有16×16的大小.

所以,这是primefaces按钮:

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
    <p:dataExporter type="csv" target="gridRPBDetails" 
        filename="#{TinputBean.exportFilename}" />
</p:commandButton>

这是css文件:

.ui-icon-csv {
    BACkground-image: url(images/csv_small.png);
}

这是按钮生成的html:

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-priMary" 
    role="button" aria-disabled="false">
        <span class="ui-button-icon-priMary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span>
</button>

为了证明图像可访问,我尝试这个URL,它确实显示了图片:

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png

我使用Tomcat 7,这些是我的依赖:

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>2.2.1</version>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>

出了什么问题?

谢谢 !

解决方法

在使用firebug进行一些调查后,我发现罪魁祸首来自我定义的CSS内容.

所以这些是我为使这项工作所做的改变.

JSF按钮:

<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false">
    <p:dataExporter type="xls" target="gridRPBDetails" 
        filename="#{TinputBean.exportFilename}" />
</p:commandButton>

CSS:

.ui-state-default .ui-icon-xls {
    BACkground-image: url(images/excel_small.png);
}

这是生成的html:

<button type="submit" title="Excel Document" onclick=";" 
  name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
  role="button" aria-disabled="false">
    <span class="ui-button-icon-priMary ui-icon ui-icon-xls"></span>
    <span class="ui-button-text">ui-button</span>
</button>

谢谢 !

大佬总结

以上是大佬教程为你收集整理的html – 需要帮助才能在命令按钮中显示图标图像全部内容,希望文章能够帮你解决html – 需要帮助才能在命令按钮中显示图标图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。