如何在 JSF 页面中使用自定义标签创建按钮答案

【问题标题】：How to create a button in JSF page with custom label如何在 JSF 页面中使用自定义标签创建按钮
【发布时间】：2012-08-01 20:52:53
【问题描述】：

我有这个简单的 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 我得到这个结果：

【问题讨论】：

标签： jsf jsf-2

【解决方案1】：

使用将包装您的图像的命令链接：

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

另外，<h:graphicImage/> 在mkyong site 中有一个很好的例子。

根据您的 cmets，您似乎想要一个带有图标的按钮。此外，真正的行动是由你隐藏的<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>

是的，您可以将基本 HTML 与 JSF 代码混合使用，但请阅读有关 IE 6 浏览器客户端上此实现的链接警告。

【讨论】：

奇怪，按钮可以工作，但按钮上没有标签 - 只有图像。
是的，但我也想在按钮属性定义的按钮上贴上“删除”标签。
所以您正在寻找一个带有图标的按钮？
@user1285928 如果您显示您的实际代码来编辑我的答案会更好。另外，我已经测试了带有图片的按钮，它可以工作。
我已经阅读了，但是除了deletedialog js方法我找不到它的定义之外，我没有看到任何问题。

【解决方案2】：

我会从基础开始。由于您甚至没有看到图像，因此当您右键单击浏览器窗口并选择“查看源代码”时，它是否会提供有关图像是否被插入到页面上的任何有意义的信息？如果您没有正确的图像路径，它将不会在页面上呈现图像。这是首先要检查并尝试纠正的事情。（即计算机是否已插入）。

【讨论】：