jQuery UI自定义对话框按钮

时间:2013-10-18 16:19:21

标签: jquery jquery-ui

我在jQuery UI中工作,并试图找到一种通过按钮选项数组传递自定义数据字段的方法。我想通过以下示例中的字段。数据示例&数据例题。这可以通过按钮param ??

来完成
<button type="button" data-example="XXXX" data-example2="YYYY" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" ><span class="ui-button-text">xxx</span></button>

这是我的创建对话框代码 -

options = {
                autoOpen: true,
                buttons : [
                    {text:"example1"},
                    {text:"example2"}
                ]
            }
jQuery("<div class='dialog' title='xxx'><p>xxx</p></div>")
            .dialog(options);

http://api.jqueryui.com/dialog/#option-buttons

2 个答案:

答案 0 :(得分:10)

这个例子应该有所帮助。

$(function() {
   $( "#dialog" ).dialog({ buttons: [ { id:"test","data-test":"data test", text: "Ok", click:    function() {alert($('#test').data('test')); $( this ).dialog( "close" ); } } ] });
});

http://jsfiddle.net/9g6jM/

答案 1 :(得分:0)

您可以在打开对话框或在代码中需要时设置jQuery UI按钮属性。

代码:

$("#demo")
    .dialog({
    autoOpen: true,
    buttons: [{
        text: "example1"
    }, {
        text: "example2"
    }],
    open: function (event, ui) {
        $(":button:contains('example1')").attr("data-example", "XXX").attr("data-example2", "YYY");
    }
});

代码选择jQuery UI按钮example1并设置其数据属性。

演示:http://jsfiddle.net/IrvinDominin/BKHEn/