4

この単純な JSF ボタンがあります。

//Question Dialog
function deletedialog(button, a){      
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $("#form\\:deleterow").click();
                //  $('input[id$="deleterow"]').click();               
                $(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}


                    <!-- hidden button -->
                    <h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
                        <f:ajax render="@form"></f:ajax>
                    </h:commandButton>
                    <!-- the delete button -->
                    <h:button onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" >
                        <h:graphicImage name="small-hover.png" library="images" title="Delete" />
                    </h:button>

ボタンのビジュアルボディとなるpng画像を作成したいと思います。value変更するのは、ボタンの属性を使用して毎回設定するボタンのタイトルだけです。これは可能ですか？JSF ページをロードすると、ラベルのない空のボタンしか表示されません。

PS 1 次の結果が得られます。

ここに画像の説明を入力

4

2 に答える 2

3

画像をラップするコマンドリンクを使用します。

<script type="text/javascript">
    function deletedialog(button, a) {
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    //$("#form\\:deleterow").click();
                    //using the hidden button click
                    document.getElementById('myForm:deleterow').click();
                    //  $('input[id$="deleterow"]').click();               
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                }
            }
        });
    }
</script>

<h:form id="myForm">
    <h:commandLink onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;">
        <h:graphicImage name="small-hover.png" library="images"
            title="#{someBean.imageTitle}" />
    </h:commandLink>
    <h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
        <f:ajax render="@form" />
    </h:commandButton>
</h:form>

また、mkyongサイトの良い例が<h:graphicImage/>あります。

コメントによると、アイコン付きのボタンが必要なようです。また、実際のアクションは非表示のによって実行されます<h:commandButton>。だから私はあなたがこの答えを読むことをお勧めします：

コードは次のようになります。

<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
    <f:ajax render="@form" />
</h:commandButton>
<button type="submit" onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;"><img src="resources/images/small-hover.png" /> Delete</button>

はい、基本的なHTMLとJSFコードを混在させることができますが、IE6ブラウザークライアントでのこの実装に関するリンク警告をお読みください。

于 2012-08-03T19:22:59.620 に答える
1

基本から始めます。画像も表示されないので、ブラウザ ウィンドウを右クリックして [ソースを表示] を選択すると、画像がページに挿入されているかどうかについて意味のある情報が得られますか? 画像のパスが正しくないと、ページに画像が表示されません。それが最初に確認し、修正しようとすることです。(つまり、コンピュータが接続されている)。

于 2012-08-20T19:50:16.797 に答える