1

我有一个 jQuery 对话框：

    // Configure buttons
    var dialogButtons = {};

    dialogButtons[buttonConfirm] = function () {
        $.ajax({
            type: "Post",
            url: href,
            cache: false,
            success: function (data) { var func = success; window[func](data); }
        });
        $(this).dialog("close");
    };

    dialogButtons[buttonCancel] = function () {
        $(this).dialog("close");
    };

    // Configure dialog
    $dialog.dialog(
        {
            modal: true,
            closeOnEscape: true,
            resizable: false,
            buttons: dialogButtons
        });

    // Opening dialog
    $dialog.dialog('open');

我的问题：我想在我的按钮上设置一个特定的类“btn”。我怎样才能做到这一点？

谢谢

4

3 回答 3

1

@Colin 有一个答案，但我想我会更具体地讨论有问题的对话。jQuery-UI 有一个widget方法可以返回由对话框本身组成的元素。将此与定位ui-button类相结合，您可以获得所需的内容：

$dialog.dialog('widget') // Grab widget (UI element)
  .find('.ui-button')    // Locate buttons within
  .addClass('btn');      // hadd btn class to them

编辑：另外，这是一个例子：http: //jsfiddle.net/8WckB/

于 2012-04-18T12:48:31.403 回答
1 
// Configure dialog
$dialog.dialog({
    modal: true,
    closeOnEscape: true,
    resizable: false,
    buttons: dialogButtons,
    open: function(e, ui) { 
        $(this).parents(".ui-dialog").find(".ui-dialog-buttonset"); // here is your 
                                                                    // button container
        $(this).parents(".ui-dialog").find(".ui-dialog-buttonset .ui-button").addClass("btn"); // whereas this would select
                                                                                               // all buttons in button container
        // you could even use the widget method
        // $(this).dialog("widget").find(".ui-dialog-buttonset .ui-button")
    }
});
于 2012-04-18T12:50:44.813 回答
1

如果您查看源代码，在方法_createButtons中jquery.ui.dialog.js您会看到由按钮文本索引的哈希如果不是函数，则被视为属性集合。因此，您可以执行以下操作：

var $dlg = $('#dlg').dialog({
    buttons: {
        'firstButton': {            
            'click': function() {
                $dlg.dialog('close');
            },
            'text' : 'OK',         
            'class': 'myclass'
        },
        'Cancel': function(){
            $dlg.dialog('close');
        }
    }
});

这是布拉德小提琴的一个分支，演示了代码http://jsfiddle.net/uWnpy/

于 2012-04-18T13:50:59.703 回答