Question

我有一个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'。我怎么能这样做？

由于

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

Answer 2

// 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")
    }
});

Answer 3

如果您查看源代码，在_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/

的一个分支

在我的jquery对话框的按钮上添加一个类

3 个答案: