根据内部内容自动调整大小和添加滚动条

Question

我有这个 JQuery 对话框，里面有 JQuery 选项卡功能。我的问题是我想根据标签内容重新调整对话框的大小和位置。

如果第一个选项卡的内容适合屏幕大小，我有这段代码可以很好地工作（这是指对话框对象）：

if ($(this).parent().height() > $(window).height()) {
   $(this).height($(window).height() * 0.8);
}
$(this).dialog({
   position: "center"
});

如果另一个选项卡的内容不同，我希望对话框自行重绘。

这是fiddle 上的示例。

我该如何实现？

Answer 1

我会以这种方法为例：

       $(function () {
           $("#details-dialog").dialog({
               autoOpen: false,
               height: "auto",
               minWidth: 500,//optional
               modal: true,
               buttons: {
                   "Close Window": function () {
                       $(this).dialog("close");
                   }
               },
               open: function () {
                   $('#tabs1').tabs();
                   if ($(this).parent().height() > $(window).height()) {
                       $(this).height($(window).height() * 0.8);
                   }
                   $(this).dialog({
                       position: "center"
                   });
               },
               close: function () {}
           });


           $("#tabs1 a").click(function() {
               var size_id = $(this).attr("href");
              $("#details-dialog").parent().width($(size_id).width() + 100 );

              $("#details-dialog").dialog({
                 position: "center"
              });
            });

       });

这是小提琴http://jsfiddle.net/utvCr/14/