微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – 调整大小后如何获得对话框的高度和宽度?

我成功创建了一个带有调整大小启用的对话框但是对于我的项目,我需要在用户调整大小后打开对话框的高度和宽度.

我创建了一个id = opener的按钮和一个id = dialog的div.有人可以帮助我.

使用Javascript

// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() 
{
    $( "#dialog" ).dialog(
    {
        modal:true,autoOpen: false,show: "blind",hide: "explode",buttons: [
        {
            text: "Ok",click: function() { $(this).dialog("close"); }
        }],resizable: true,width:'auto',height:'auto'
    });

    $( "#opener" ).click(function() 
    {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});

HTML:

<body>
    <div class="demo">
        <div id="dialog" title="Basic dialog">
            <p>My content here. I want to show the height and width of my dialog after it is resized by a user
            </p>    
        </div>
        <button id="opener">Open Dialog</button>
    </div>
</body>

解决方法

使用resizeStop事件如下:

$( "#dialog" ).dialog({
    modal:true,buttons: [{
             text: "Ok",click: function() { $(this).dialog("close"); }
             }],height:'auto',resizeStop: function(event,ui) {
        alert("Width: " + $(this).outerWidth() + ",height: " + $(this).outerHeight());        
    }
});

调整对话框大小后,将触发resizeStop选项中指定的函数内容.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐