【问题标题】:The problem about the of jquery UI accordion fill spacejquery UI手风琴填充空间的问题
【发布时间】:2010-12-11 08:40:43
【问题描述】:

我在 div 容器中有一个具有手风琴效果的 div,我希望手风琴 div 填满容器 div

所以我从下载演示中学到了将 fillSpace: true 设置为容器 div,我写道:

.resizable({
       resize: function () {
       $(".accordion").accordion("resize");
});

容器还添加了一些 jquery ui 类,例如 "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"

但问题发生了,当我拖动容器并调整大小时,无论是长还是短,内部的手风琴只会变长,

那么我该如何解决这个问题呢? here is the online case

谢谢

【问题讨论】:

    标签: jquery user-interface accordion


    【解决方案1】:

    有几个问题。如前所述,当您调整 portlet 的大小时,没有正确调整标题的大小。这是因为标题具有固定的宽度。如下使用 100% 宽度:

    .portlet-header{ width:100%; height:25px;position:relative; }
    

    主要问题是当您调整大小时,portlet-content div 没有调整大小,只有主 portlet 之一。因此,当您要求手风琴调整容器大小时,容器实际上并没有更大。您需要使 portlet-content 填充 portlet div。如果你这样做:

    .portlet-content { overflow:auto; height: 100%; }
    

    内容 div 高度将等于门户 div 高度,这是不正确的(因为它没有考虑标题的大小)。

    这是一个用 JavaScript 调整 portlet-content div 大小的解决方案:

    $(".portlet").resizable({
        resize: function () {
            var height = $(".portlet").height() - $(".portlet-header").height();
            $(".portlet-content").height( height );
            $(".accordion").accordion("resize");
        }
    });
    

    如果您只想在调整大小操作完成时发生自动调整大小,也可以使用“停止”事件而不是“调整大小”。

    【讨论】:

    • 感谢您解决了我的问题。实际上在我的实际项目中,标题大小合适,这里只是为了简单,让您更好地理解它,所以我剪掉了很多html代码:)跨度>
    【解决方案2】:
    .portlet-header{ width:100%; height:25px;position:relative; }
    

    【讨论】:

    • e……也许你没有明白我的意思……当容器调整大小时,手风琴的 div 不能适应外部容器,而不是标题问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多