CODEWITHSUNDEEP
jquery-uitabs
m3div0
m3div0

Reputation: 1586

jQuery UI tabs - how to change tab position

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.

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?

Thanks

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

Upvotes: 0

Views: 3368

Answers (2)

m3div0
m3div0

Reputation: 1586

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) 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)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

Upvotes: 0

Barmar
Barmar

Reputation: 780724

Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:

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

and then use $(".tabs").tabs(...)

Upvotes: 0

Related Questions