Response title
This is preview!
Could someone help with custom tab position implementation in jQueryUI?
in Using jQuery UI
•
12 years ago
In the demo about bottom-aligned tabs, it suggests that you build your tabs, then run a script that strips the "ui-corners-all" and "ui-corners-top" classes from your tab elements and add "ui-corners-bottom".
And there is no documentation about changing the position of the panel tabs, though I am sure it is similar.
As such, I took the jqueryUI code and upon applying the styles to the "elements", "list", "lis", and "panels",
I check to see if the options array contained bottomtabs==true? and if it did, I added "ui-corners-bottom". If not, I added "ui-corners-all, ui-corners-top"
I also checked to see if the options array contained paneltabtop==true? and if it did, I added "ui-corners-all ui-corners-top" otherwise I used the default "ui-corners-bottom"
I almost got it right, but it needs a little work. Can someone give me some input? Personally, I think that this should be a standard implementation in jQueryUI, but until it is (or if it never is), could someone help me get it setup correctly for my own use?
Thanks in advance for your support.
Jase
p.s. the original code (uncompiled) looks like:
in the uncompiled source: jQuery.ui.tabs.js
classes in red are used to position tab corners at the top for tabs, bottom for panels.
- this.element.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" );
- this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );
- this.lis.addClass( "ui-state-default ui-corner-top" );
- this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );
This is my version of the same section:
the above classes in red have been removed and conditionally added later
the items in purple are options passed during construction
the items in blue are the alternate position classes
- this.element.addClass( "ui-tabs ui-widget ui-widget-content" );
- this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header" );
- this.lis.addClass( "ui-state-default" );
- if (!o.bottomtabs) {
- this.element.addClass("ui-corner-all");
- this.list.addClass("ui-corner-all");
- this.lis.addClass("ui-corner-top");
- } else {
- this.element.addClass("ui-corner-bottom");
- this.list.addClass("ui-corner-bottom");
- this.lis.addClass("ui-corner-bottom");
- }
- this.panels.addClass( "ui-tabs-panel ui-widget-content");
- if (!o.tabpaneltop) this.panels.addClass("ui-corner-bottom");
- else this.panels.addClass("ui-corner-top");
then the jQuery to initialize tabs goes:
- $( "#tools_pnl" ).tabs({collapsible:true, bottomtabs:true, paneltabtop:true});
and the body html goes:
- <div id="tools_pnl" class="ui-tabs-bottom">
- <ul>
- <li><a href="#config_tab">preferences</a></li>
- <li><a href="#comment_tab">comment</a></li>
- <li><a href="#link_tab">links</a></li>
- </ul>
- <div id="config_tab"><p>configuration info</p></div>
- <div id="comment_tab">comments </div>
- <div id="link_tab">links</div>
- </div>
and finally, the CSS goes:
- .ui-tabs-bottom { position: relative; }
- .ui-tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; }
- .ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; }
- .ui-tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
------
It works pretty well, but I am sure there is shorter syntax for the conditional class implementation.
Ideally, rather than passing options in the constructor, I would have the tabs constructor look in the source divs parent class list for "ui-panels-top" or "ui-tabs-bottom" class and automatically apply the corrections.
Then your constructor would remain identical to how it is normally, and you would just add the alternate class to the tab holding div. Voila! your tabs are aligned on the bottom.
(next: side tabs!)
Any input would be greatly appreciated. Thanks in advance for your help and consideration.
Jase
1