<p:commandbutton>图标图像未显示</p:commandbutton>

时间:2013-05-17 17:03:38

标签: css jsf-2 primefaces xhtml firebug

我一直在苦苦挣扎。我正在使用primefaces 3.5。我有一个带图标属性的命令按钮。但图像似乎没有显示出来。我不确定我是否正确放置了图片网址。我尝试了几条路。但仍然没有工作。在萤火虫中,我可以看到图标。

我的图片位于/ BelsizeWeb / WebContent / theme / primefaces-aristo / images 驻留在/ BelsizeWeb / WebContent / theme / primefaces-aristo

上的CSS

theme.css

.ui-icon-excel {
    background-image: url("images/toexcel.gif");
}

XHTML

<link type="text/css" rel="stylesheet"
  href="#{request.contextPath}/theme/primefaces-aristo/theme.css" />

<p:commandButton type="submit"
                 styleClass="commandExButton_image" id="cr1001_command_toexcel"
                 icon="ui-icon-excel"
                 action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
              </p:commandButton>

1 个答案:

答案 0 :(得分:1)

Icon属性仅适用于PrimeFaces(jQuery UI)的预览图标。

要解决您的要求,有两种方法。

1。使用p:commandButton的图像

修改你的css类,如下所示,

     .ui-icon-excel {
            background: url("images/toexcel.gif")  no-repeat top left !important;;
     }

然后使用您的命令按钮,如下所示,

<p:commandButton type="submit"
             id="cr1001_command_toexcel"
             image="ui-icon-excel"
             action="#{pc_Cr1001.doCr1001_command_toexcelAction}" ajax="false">
          </p:commandButton>

2. 使用jsf h:commandButton,如下所示,

<h:commandButton image="images/toexcel.gif"/>

你可以进一步ajaxify h:commandButton