如何在带有自定义标签的JSF页面中创建按钮 [英] How to create a button in JSF page with custom label

问题描述

我有一个简单的JSF按钮:

I have this simple JSF button:

//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页面时，我只会看到没有标签的空按钮.

I want to create png image which will be the visual body of the button. The only thing that I will change will be the title of the button which I will set every time using the value attribute of the button. Is this possible? Now when I load the JSF page I see only empty button without label.

P.S 1我得到以下结果:

P.S 1 I get this result:

推荐答案

使用将包装您的图片的命令链接:

Use a command link that will wrap your image:

<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/>示例. .

Also, there is a good example of <h:graphicImage/> in mkyong site.

根据您的评论，您似乎想要一个带有图标的按钮.另外，真正的动作是由隐藏的<h:commandButton>执行的.因此，我建议您阅读以下答案:

Based on your comments, it looks like you want to have a button with an icon. Also, the real action is performed by your hidden <h:commandButton>. so I recommend you to read this answer:

• HTML/CSS如何在输入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浏览器客户端上实现的链接警告.

Yes, you can mix basic HTML with JSF code, but read the link warning about this implementation on IE 6 browser clients.

这篇关于如何在带有自定义标签的JSF页面中创建按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！