Как получить высоту и ширину диалога после изменения размера? - PullRequest
Новая
       28

Как получить высоту и ширину диалога после изменения размера?

5 голосов
/ 18 февраля 2012

Я успешно создал диалог с разрешением изменения размера, но для моего проекта мне нужна высота и ширина открытого диалога после того, как пользователь изменил его размер.

Я создал кнопку с id = opener и adiv с id = диалог.Может кто-нибудь, пожалуйста, помогите мне, если это возможно.

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>

1 Ответ

8 голосов
/ 18 февраля 2012

Используйте событие resizeStop следующим образом: 

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

Содержание функции, указанной в параметре resizeStop, запускается после изменения размера диалогового окна.

...