Ticket #4877 (closed enhancement: fixed)

Opened 6 years ago

Last modified 6 years ago

Enhance ui-tabs list "UL:first" selector to allow for alternative markup

Reported by: george.adamson@… Owned by:
Priority: minor Milestone: 1.8
Component: ui.tabs Version: 1.7.2
Keywords: ui tabs UL list selector Cc:
Blocking: Blocked by:


The ui-tabs plugin is hard coded to assume that the <ul> list is a child of the current element.

The code in question is in the _tabify method:

_tabify: function(init) {

this.list = this.element.children('ul:first'); ...


This limits the markup to have to match >UL:first. Use any other markup and the tabs plugin will fail to locate the <ul> list.

I changed the code to use find() instead of children() and added an option to the defaults as follows: (Note the use of ">" in the selector to ensure find() continues to work the way children() does currently by default)

_tabify: function(init) {

this.list = this.element.find(this.options.listSelector); ...


defaults: {


listSelector: '>ul:first'


Now, when we initialise the tabs plugin, we can specify listSelector: '>DIV>ul:first' to handle my non-standard markup.



ui.tabs.js Download (18.8 KB) - added by george.adamson@… 6 years ago.
ui.tabs.js with UL selector enhancements on lines 75 and 630

Change History

Changed 6 years ago by george.adamson@…

ui.tabs.js with UL selector enhancements on lines 75 and 630

comment:1 Changed 6 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed
  • Component changed from ui.core to ui.tabs
  • Milestone changed from TBD to 1.8

Fixed in r3421. Tabs now uses the first descendant list it encounters. This isn't as flexible as your proposal, but doesn't require any additional options.

Note: See TracTickets for help on using tickets.