jquery-ui – 在jQuery UI选项卡之间共享一个元素？

发布时间：2020-12-14 22:44:31 所属栏目：资源来源：网络整理

导读：我正在使用jQuery UI的标签来划分页面上的内容.我有一个“链接栏”我希望挂在每个标签的底部. (选项卡文本将更改,但通常它们将向左或向右导航用户选项卡.) 在第一个选项卡中托管#linkBar div使其“看起来”正确,位于Themeroller的边框内.将它放在“父标签”d

我正在使用jQuery UI的标签来划分页面上的内容.我有一个“链接栏”我希望挂在每个标签的底部. (选项卡文本将更改,但通常它们将向左或向右导航用户选项卡.)

在第一个选项卡中托管#linkBar div使其“看起来”正确,位于Themeroller的边框内.将它放在“父标签”div之外,将链接放在主题边框下方.我已经尝试创建了一个spacer div,但它只是进一步推动了#linkBar.

当然,当用户切换到另一个选项卡时,链接栏就会消失.标签之间如何组织元素的所有权？我应该动态销毁正在导航的选项卡上的#linkBar div,并在导航到的选项卡中重建它吗？或者有更好的方法在它们之间移动它,或者只是管理可见性？

我想让链接栏按照每个标签上的内容作为页脚,在每个标签的最后一个内容下面“浮动”一行或两行(而不是将其放在相对于标签栏的固定位置).

最佳答案

好的……它只是将jQuery UI类添加到linkBar. Check out my working jsFiddle demo:

我将linkBar div移出tabOne div并将其放在tabs div的底部：


我稍微修改了linkBar样式,给它一个顶部和底部边距,并默认隐藏它：

#linkBar {
    display: none;
    margin: 10px auto;
}

然后我简单地将jQuery UI类添加到$linkBar.我略微改变了jQuery以使其更具可读性：

$("#accordion").accordion({ header: "h3" });

var $tabs = $("#tabs"),$linkBar = $("#linkBar");

$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();

$('#title').click(function() {

    $tabs.tabs('select',0);
    return false;

});

注意：您可以将class =“ui-tabs-panel ui-widget-content ui-corner-bottom”添加到linkBar div并完成它.但是,我认为我更喜欢在JS中管理它.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!