2012-02-18 20 views
4

私はresize enableでダイアログを正常に作成しましたが、私のプロジェクトでは、ユーザがサイズを変更した後、開いているダイアログの高さと幅が必要です。サイズ変更後のダイアログの高さと幅を取得する方法は?

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:

$("#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オプションで指定された関数の内容は後にトリガされます。

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

答えて

6

次のようにresizeStopイベントを使用しますダイアログのサイズが変更されました。

+0

ありがとうございました.....私は本当にあなたの答えに満足しています。私は私が探していたものを得ました。 :) – Arnab

+0

私はあなたの答えを受け入れている...しかし、評判がないので、投票は15です。 – Arnab

関連する問題