2012-08-01 155 views
0

我已创建选项卡布局,如示例http://jqueryui.com/demos/tabs/#bottom与面板中的控件一样。我有3个默认选项卡,不能被删除,并且用户可以添加更多选项卡并删除它们。jQuery UI选项卡 - 如何更改选项卡的位置

问题是,默认的选项卡应该在顶部,就像那个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>固定heigth。但是现在我不知道如何将默认选项卡移动到正确的位置。我尝试添加position: relative; top:-20em;,但为了使其工作,整个标签容器必须有固定的高度,这是不好的,因为我需要它在窗口内拉伸以尽可能大。

那么还有什么其他的方式来将默认的标签移动到顶部?

感谢

编辑:我这里是我的想法,但FIXD heigth实现http://jsfiddle.net/L6QjK/2/

需要明确的是:这种方法是technicaly工作,所以questin是不是有两个控制面板制作标签,但对定位标签

回答

0

所以最后我设法通过改变jquery UI代码来创建两个控制面板。 如果有人试图做同样的事情,我这里有一些提示:

1)要创建多个控制面板,找到现在this.list=this.element.find("ol,ul)").eq(0) ,该.eq(0)选择的原因,即onlz第一UL或醇是由控制面板,所以我只是简单地将查找选择器修改为:this.list=this.element.find("ol,ul:lt(2))"):lt(2)选择器将使前两个UL到两个控制面板。现在我们有两个控制面板,并且都是关于css定位的,您可以在这里找到http://jqueryui.com/demos/tabs/#bottom将一个控制面板移动到底部。

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

所以finaly使两个控制面板选项卡的布局并不难

0

不知道这是否会成功,但尝试创建两个div,一个默认的造型和一个与底部造型:

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

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

+1

有趣的想法,但没有工作,这将创建两个标签布局 – david 2012-08-01 13:12:34

相关问题