bsp*_*oel 22 jsf button primefaces
我希望有一个看起来像按钮的组件,但它应该包含一个图像,而不是文本.由于标准按钮不提供此功能,我尝试使用<h:commandLink>:
<h:commandLink action="#{some_action}">
<p:panel styleClass="some_style">
<h:graphicImage value="#{some_image}">
</p:panel>
</h:commandLink>
Run Code Online (Sandbox Code Playgroud)
这不起作用.将<h:commandLink>被转换成一个<a>标签,和<p:panel>成<div>.<a>-tags可能不包含<div>-tags,因此<div>-tag会自动放在<a>-tag 之外.结果是只有图像是可点击的,而不是周围的面板,其样式看起来像一个按钮.有没有办法让周围的面板成为链接的一部分,或者将图像放在按钮内?
我的项目使用JSF和Primefaces库:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
Run Code Online (Sandbox Code Playgroud)
Mar*_*ark 31
您可以通过几种方法将图像添加到commandButton:
使用图像属性
<h:commandButton action="#{some_action}" image="button.gif" />
Run Code Online (Sandbox Code Playgroud)
要为此按钮显示的图像的绝对或相对URL.如果指定,则此"input"元素将为"image"类型.否则,它将是"type"属性指定的类型,其标签由"value"属性指定.
使用CSS
<h:commandButton action="#{some_action}" styleClass="button" />
.button {
background: white url('button.gif') no-repeat top;
}
Run Code Online (Sandbox Code Playgroud)
你可以把div移到外面,例如
<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
<h:graphicImage value="#{some_image}">
</h:commandLink>
</div>
Run Code Online (Sandbox Code Playgroud)
并以这种方式设计div.只需将锚(标记)显示为一个块,它应该填充整个div,这样它就可以全部点击.例如在你的CSS中:
.clickAll{
display:block;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
61805 次 |
| 最近记录: |