web-dev-qa-db-ja.com

JSFで画像ボタンを作成する方法

ボタンのように見えるコンポーネントが必要ですが、テキストの代わりに画像を含める必要があります。標準ボタンにはこの機能がないため、<h:commandLink>を使用しようとしました。

<h:commandLink action="#{some_action}">
    <p:panel styleClass="some_style">
        <h:graphicImage value="#{some_image}">
    </p:panel>
</h:commandLink>

これは機能しません。 <h:commandLink>は<a>タグに変換され、<p:panel>は<div>に変換されます。 <a>-タグには<div>-タグを含めることはできないため、<div>-タグは<a>-タグの外側に自動的に配置されます。その結果、画像のみがクリック可能になり、ボタンのように見えるスタイルの周囲のパネルはクリックできなくなります。周囲のパネルをリンクの一部にする方法、またはボタン内に画像を配置する方法はありますか？

私のプロジェクトでは、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">
jsfbuttonprimefaces
22
bspoel

commandButton に画像を追加するには、いくつかの方法があります。

画像属性を使用する

<h:commandButton action="#{some_action}" image="button.gif" />

このボタンに表示される画像の絶対URLまたは相対URL。指定されている場合、この「input」要素のタイプは「image」になります。それ以外の場合、「value」プロパティで指定されたラベルを持つ「type」プロパティで指定されたタイプになります。

CSSを使用する

<h:commandButton action="#{some_action}" styleClass="button" />

.button {
    background: white url('button.gif') no-repeat top;
}
31
Mark

Divを外に移動するだけです。

<div class="myButton">
<h:commandLink action="#{some_action}" styleClass="clickAll">
        <h:graphicImage value="#{some_image}">
</h:commandLink>
</div>

そしてdivをそのようにスタイルします。アンカー（タグ）をブロックとして表示すると、div全体に表示されるため、すべてクリック可能になります。たとえば、CSSの場合：

.clickAll{
  display:block;
}
8
planetjones

PrimeFaces/JSFのアイコンを使用できる場合、シンプルで適切なソリューションがあります

<p:column>
    <p:commandButton icon="ui-icon-wrench"
     style="border-width:0;background:none;"/>
</p:column>

JSFでJavaScriptコードを回避すると役立つ場合があります。

4
Prateek Singh

画像が収まらない場合は、プロパティをсssクラスに追加します。

.button {
    background: white url('button.gif') no-repeat top;
    width: 32px;   // button width
    height: 32px;  // button height
    background-size: contain;
    border: none;  // hide border of button
}
0
0x5a4d