需要帮助在命令按钮中显示图标图像 [英] Need help to display an icon image in a command button
问题描述
只是一个基本的需要,但不能让它工作。
我想有一个primefaces按钮来显示我的图像,没有任何文本。
Just a basic need but cannot get it to work. I would like to have a primefaces button to display my image, without any text.
但我得到的是一个按钮,只包含一个 ^
字符,并且不显示大小为16x16的图片。
But what i get is a button that contains only a ^
character and does NOT displaying the image, which only has a size of 16x16.
所以,这是表单按钮:
<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
<p:dataExporter type="csv" target="gridRPBDetails"
fileName="#{tInputBean.exportFilename}" />
</p:commandButton>
这是css文件:
This is the css file :
.ui-icon-csv {
background-image: url(images/csv_small.png);
}
html的按钮:
And this is the generated html for the button :
<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,确实显示图片:
And to prove the image accessible, i try this URL, and indeed it shows the picture :
http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png
,这些是我的依赖关系:
Im using tomcat 7, and these are my dependencies :
<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>
任何想法出了什么问题?
Any ideas what went wrong ?
谢谢!
推荐答案
使用firebug进行调查后,犯罪是从我定义的CSS东西。
After some investigation using firebug, i found out that the culprit is from the CSS stuff i defined.
这些都是我做的工作。
JSF按钮:
<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false">
<p:dataExporter type="xls" target="gridRPBDetails"
fileName="#{tInputBean.exportFilename}" />
</p:commandButton>
CSS:
The CSS :
.ui-state-default .ui-icon-xls {
background-image: url(images/excel_small.png);
}
html:
And here is the generated 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>
谢谢!
Thank you !
这篇关于需要帮助在命令按钮中显示图标图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!