代码之家  ›  专栏  ›  技术社区  ›  user1032531

创建时访问jQueryUI对话框按钮

  •  1
  • user1032531  · 技术社区  · 10 年前

    如何在创建时访问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>
    
    1 回复  |  直到 10 年前
        1
  •  2
  •   Irvin Dominin    10 年前

    您可以使用 buttons 选项getter。

    代码:

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

    但如果需要检查它们的尺寸,则需要在对话框打开后使用阵列。

    代码:

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

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