如何創建JSF頁面自定義標籤

一個按鈕，我有這個簡單的JSF按鈕：如何創建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頁面時，我只看到沒有標籤的空按鈕。

P.S 1我得到這樣的結果：

enter image description here

來源

2012-08-03 user1285928

使用命令鏈接，將包裝你的形象：

<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 site<h:graphicImage/>一個很好的例子。

根據你的意見，它看起來像你想要一個帶有圖標的按鈕。此外，真正的行動是由您的隱藏<h:commandButton>執行。所以我建議你閱讀這個答案：

HTML/CSS How to add image icon to input type=「button」?

您的代碼會是這樣的：

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

是的，你可以混合使用JSF代碼的基本HTML，但閱讀在IE 6瀏覽器客戶端上關於此實現的鏈接警告。

來源

2012-08-03 19:22:59

奇怪的是，按鈕正在工作，但按鈕上沒有標籤 - 只有圖像。 – user1285928 2012-08-03 20:05:25

這不是你想要的嗎？ – 2012-08-03 20:14:21

是的，但我也希望在按鈕屬性定義的按鈕上標註「刪除」。 – user1285928 2012-08-03 22:29:30

我會從基礎開始。由於您甚至沒有看到圖像，因此當您右鍵單擊瀏覽器窗口並選擇「查看源代碼」時，它是否提供了有關圖像是否被插入到頁面上的任何有意義的信息？如果您沒有正確的圖像路徑，它將不會在頁面上呈現圖像。這是檢查並嘗試糾正的第一件事。（即插入電腦）。

來源

2012-08-20 19:50:16 BillR

如何創建JSF頁面自定義標籤

回答

相關問題