当前位置：文江博客话题详情

可折叠、可调整大小的 jQuery-ui 选项卡小部件

发布于 2024-11-18 04:43:34 字数 200 浏览 3 评论 0原文

我一直在尝试创建一组可折叠且可调整大小的选项卡。我遇到的问题是，调整大小后（在演示中拖动顶部边缘），当您单击活动选项卡将其关闭时，内容会消失，但选项卡容器保持相同的大小，而不是缩小以适合选项卡栏。

使选项卡容器在调整大小后缩小的技巧是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幼儿园老大 2024-11-25 04:43:34

我使用 Firefox 的 Web 开发工具栏追踪到了这一点。我在调整大小之前和之后执行了“查看生成的源”，并在输出上运行 diff 。调整大小会向受影响的元素添加样式属性：

style="top: 226px; left: 0px; width: 1272.87px; height: 591.867px;"

为了解决此问题，我添加了 tabsselect 事件的处理程序。当折叠 div 时，它会将 top 和 height 存储到数据属性中，然后将其删除。显示选项卡时，它会从数据属性恢复设置。

select: function(event, ui) {
    if ($tabs.tabs("option", "selected") == ui.index) {
        // we're collapsing the visible tab
        if ($tabs.css("top")) {
            $tabs.data("top", $tabs.css("top"));
            $tabs.data("height", $tabs.css("height"));
            $tabs.css("top", "");
            $tabs.css("height", "");
        }
    }
    else if (ui.index == -1) {
        // we're about to show a tab
        if ($tabs.data("top")) {
            $tabs.css("top", $tabs.data("top"));
            $tabs.css("height", $tabs.data("height"));
        }
    }
}

I tracked this down using Firefox's Web Developer Toolbar. I did "View Generated Source" before and after resizing and ran diff on the output. Resizing adds a style attribute to the affected element:

style="top: 226px; left: 0px; width: 1272.87px; height: 591.867px;"

To account for this I added a handler for the tabsselect event. It stores top and height into data attributes when collapsing the div and then removes them. When showing a tab it restores the settings from the data attributes.

select: function(event, ui) {
    if ($tabs.tabs("option", "selected") == ui.index) {
        // we're collapsing the visible tab
        if ($tabs.css("top")) {
            $tabs.data("top", $tabs.css("top"));
            $tabs.data("height", $tabs.css("height"));
            $tabs.css("top", "");
            $tabs.css("height", "");
        }
    }
    else if (ui.index == -1) {
        // we're about to show a tab
        if ($tabs.data("top")) {
            $tabs.css("top", $tabs.data("top"));
            $tabs.css("height", $tabs.data("height"));
        }
    }
}

回复收藏 0 原文

~没有更多了~