jQuery UI选项卡-如何更改选项卡位置 [英] jQuery UI tabs - how to change tab position

问题描述

我已按照此示例创建了标签页布局 http://jqueryui.com/demos/tabs/#bottom 带有控制面板下方的控件.我有3个默认标签，这些标签无法删除，而且用户可以添加更多标签，也可以删除它们.

I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.

问题在于，默认标签应位于顶部，如 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;，但是要使其正常工作，整个选项卡容器必须具有固定的高度，这很不好，因为我需要它在窗口中拉伸得尽可能大.

The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.

还有其他方法可以将默认标签页移到顶部吗?

So is there any other way how to move the default tabs to the top?

谢谢

这是我的想法的示例，但使用固定高度实现了 http://jsfiddle.net/L6QjK /2/

edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/

要清楚:此方法在技术上是可行的，因此问题不在于制作带有两个控制面板的标签，而是关于放置标签

To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs

推荐答案

所以最后，我设法通过更改jquery ui代码自行创建了两个控制面板. 如果有人想做和我一样的事情，这里有一些提示:

So finally I managed to create two control panels on my own by changing the jquery ui code. If somebody is trying to make same thing as I here are some tips:

1)要创建多个控制面板，请找到this.list=this.element.find("ol,ul)").eq(0) 现在，.eq(0)选择器导致，仅将第一个ul或ol制作到控制面板，所以我只是将find选择器修改为:this.list=this.element.find("ol,ul:lt(2))")和:lt(2)选择器将使前两个UL成为两个控制面板.现在我们有两个控制面板，它全部与css定位有关，您可以在这里看到 http://jqueryui .com/demos/tabs/#bottom 将一个控制面板移至底部.

1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0) now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.

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

2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.

所以最终要制作两个控制面板的选项卡并不难

So finaly to make two control panels tab layout isn't that hard

这篇关于jQuery UI选项卡-如何更改选项卡位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！