创建时访问 jQueryUI 对话框按钮

Question

如何在创建时访问 jQueryUI 对话框按钮并获取它们的大小？作为解决方法，我可以在打开时这样做。

http://jsfiddle.net/1ueho4tq/

var $button1;
var dialog = $('#dialog').dialog({
    autoOpen: false,
    create: function (event, ui) {
        var $button1 = $('#button1');
        console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
    },
    open: function (event, ui) {
        if (!$button1) {
            $button1 = $('#button1');
            console.log("$button1 open", $button1, $button1.outerHeight(), $button1.position().top);
        }
    },
    buttons: [{
        id: 'button1',
        text: 'Upload',
        click: function () {
            console.log('button1');
        }
    }, {
        id: 'button2',
        text: 'Save',
        click: function () {
            console.log('button2');
        }
    }, {
        text: 'Cancel',
        click: function () {
            $(this).dialog("close");
        }
    }]
});
$('#open').click(function () {
    dialog.dialog('open');
});

<div id="dialog"></div>
<button id="open">Open</button>

Answer 1

您可以使用 buttons 选项 getter 获得 jQuery UI 对话框按钮。

代码：

var buttons = $('#dialog').dialog('option', 'buttons');

但是如果你需要检查它们的维度，你需要在对话框打开后使用数组。

代码：

open: function (event, ui) {
    $.each(buttons, function (i, e) {
        console.log($('#'+e.id).outerHeight())
    });
},

演示：http://jsfiddle.net/f4m6z9hc/