6

これは Primefaces ドキュメントからのものです。

ボタン アイコン

ボタン上のアイコンは CSS と image 属性を使用して表示されます。

<p:commandButton value=”With Icon” image=”disk”/>

<p:commandButton image=”disk”/>

.disk は、background プロパティを持つ単純な css クラスです。

.disk { background-image: url('disk.png') !important; }

私の質問は: この url() はどこを指していますか? つまり、CSS がアクセスできるようにするには、画像をどこに配置すればよいでしょうか?

/resources、/resources/img を試しましたが、うまくいきません。はい、絶対 URL (コンテキスト パスを含む URL) で動作していましたが、アプリケーションは移植できません。

4

3 に答える 3

11

簡単な解決策:

JavaServer Faces 2.0 を使用している場合は、特別に設計されたディレクトリ内にすべてのリソースを配置できます。したがって、Web アプリには次のフォルダー構造が必要です。

-rootdir
--resources
---images
----disk.png

css バックグラウンドで画像を受け取るには、次のように入力する必要があります。

.disk {
background: url(#{resource['images/disk.png']}) !important;
}
于 2011-02-01T16:02:12.883 に答える
0

あなたの質問は物事のクライアント側の側面にもっと関心があるようです.Primefacesについては知りませんが、ここで答えてみましょう:

CSS パスは、CSS ルールが宣言されている場所に相対的です。

これが HTML ( <style> ブロック内) にある場合、disk.png はファイルと同じディレクトリにある必要があります。

このルールが別の CSS ファイルにある場合、disk.png は CSS ファイルがあるディレクトリにある必要があります。

ディレクトリ images を作成すると、ディレクトリも CSS からの相対になります。

お役に立てれば？

于 2010-07-24T09:41:04.300 に答える
0

私はしばらくの間同じ問題に直面しましたが、それに関するドキュメントは不明確だと思います! これは、Primefaces commandButton および同様のもの (menuItem、submenu など) に対して次のように機能します。

私がしたことは次のとおりです。

  • PrimeFaces Web サイトのテーマ ライブラリからテーマをダウンロードします (例: aristo または redmond)。
  • アーカイブを Web アプリケーションのリソースフォルダーに解凍します (私の場合: root/resources/css/aristo
  • aristo フォルダーには、theme.cssおよび /images フォルダーがあり、インデックス付きの png 画像には、テーマで使用されるすべてのアイコンが含まれていることに注意してください。
  • theme.css を開くと、インデックス付きの画像アイコンにアクセスするには、 .ui-iconと.ui-icon-theiconyouwant の#{resource['primefaces.......png']}2つのクラスを呼び出す必要があることに気付くでしょう(.ui-icon は、.ui- icon-agivenicon は、png 画像内の X & Y 位置 (インデックス) によってアイコンを区切ります)。
  • **<h:outputStyleSheet />**.テンプレートのタグの間にある最良の方法を使用して、theme.css をアプリケーションに出力します。
  • したがって、xhtmlまたはjspで、**<p:commandButton image="ui-icon ui-icon-someicon"} />**.

  • で使用する個人の画像を追加する場合は<p:commandButton、 theme.css にクラスを作成します。

    .smiley { background-image: url("#{resource['images/smiley.png']}") !important; /互換性がない場合、これは Internet Explorer によって無視されます/ width: 16px; 高さ: 16px; }

    通常、JSF はリソース フォルダー内で使用可能な最初のイメージ フォルダーにアクセスします。

  • 今行う：<p:commandButton image="smiley" value="Smile" />
于 2011-06-14T08:41:28.040 に答える