1

私はしばらくこれに苦労してきました。私はprimefaces 3.5を使用しています。アイコン属性のコマンド ボタンがあります。しかし、画像は表示されていないようです。画像のURLを正しく入れたかどうかわかりません。いくつかのパスを試しました。しかし、まだ機能していません。firebug では、アイコンが表示されます。

/BelsizeWeb/WebContent/theme/primefaces-aristo/images にある私の画像 /BelsizeWeb/WebContent/theme/primefaces-aristo にある CSS

テーマ.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>
4

1 に答える 1

1

Icon プロパティは、PrimeFaces (jQuery UI の) 事前定義されたアイコンのみで機能します。

要件を解決するには、2 つの方法があります。

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"/>

h:commandButton をさらに ajaxify できます

于 2013-05-17T19:34:35.013 に答える