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

时间:2013-06-06 07:56:12

标签: jquery jquery-ui-dialog jquery-ui-tabs

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

如果第一个标签的内容符合或不符合屏幕尺寸,我的代码效果非常好(这是指对话框对象):

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

如果另一个标签的内容不同,我希望对话框自行重绘。

以下是fiddle的示例。

我该如何实现?

1 个答案:

答案 0 :(得分:0)

我会采用这种方法:

       $(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/