Question

我已经创建了标签布局，如本例http://jqueryui.com/demos/tabs/#bottom所示，面板旁边有控件。我有3个默认选项卡，不能删除，用户可以添加更多选项卡，也可以删除它们。

问题是默认选项卡应该像http://jqueryui.com/demos/tabs/#default一样位于顶部，因为UI不支持两个控制面板，我在顶部<p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p>创建了一个看起来像控制面板的新元素固定高度。但现在我不知道如何将默认选项卡移动到正确的位置。我尝试添加它们position: relative; top:-20em;，但为了使其工作，整个标签容器必须具有固定的高度并且这很糟糕，因为我需要它在窗口内伸展以尽可能大。

那么有没有其他方法可以将默认标签移到顶部？

由于

编辑：这是我的想法的示例，但是使用fixd heigth http://jsfiddle.net/L6QjK/2/

实现

要明确：此方法技术上有效，因此questin不是关于使用两个控制面板制作标签，而是关于定位标签

Answer 1

不确定它是否可行，但尝试创建两个DIV，一个具有默认样式，另一个具有底部样式：

<div class="tabs">...
<div class="tabs tabs-bottom">

然后使用$(".tabs").tabs(...)

Answer 2

所以最后我通过更改jquery ui代码自己创建了两个控制面板。如果有人试图和我在这里做同样的事情是一些提示：

1）要创建多个控制面板，请找到this.list=this.element.find("ol,ul)").eq(0) 现在，.eq(0)选择器导致onlz第一个ul或ol被控制面板，所以我只是将查找选择器修改为：this.list=this.element.find("ol,ul:lt(2))")并且:lt(2)选择器将首先进行两个UL到两个控制面板。现在我们有两个控制面板，它们都是关于css定位的，你可以在这里获得isnpired http://jqueryui.com/demos/tabs/#bottom来将一个控制面板移到底部。

2）我正在使用架构，第一个控制面板包含静态选项卡，第二个控制面板添加了dznamic选项卡。所以我还需要在添加标签期间更改目标。为此，您必须找到h.appendTo(this.list)并将其更改为h.appendTo(this.list[1])，因为ad.1）this.list现在包含两个元素，我希望标签添加到第二个元素。

所以最后制作两个控制面板标签布局并不是那么难

jQuery UI选项卡 - 如何更改选项卡位置

2 个答案: