[Tabs] Separate panels from tabs in markup

[Tabs] Separate panels from tabs in markup

Due to my limitation to the current markup (unless I restructure the entire web app), I have separated the tabs from the panels:

  1. <div id="wrap-header">
  2.   <div id="tab-panel">
  3.     <ul>
  4.       <li><a href="#Page-1">Page 1</a></li>
  5.       <li><a href="#Page-2">Page 2</a></li>
  6.     </ul>
  7.   </div>
  8. </div>

  10. [...]

  12. <div id="canvas">
  13.   <div class="canvas-tabs" id="Page-1">Page 1 content</div>
  14.   <div class="canvas-tabs" id="Page-2">Page 2 content</div>
  15. </div>

Currently $.widget( "ui.tabs" ) is looking for the panel id's within' div#tab-panel (line 14161):


  1. _processTabs: function() {
  2. var that = this;
  3. [...]
  4. this.anchors.each(function( i, anchor ) {
  5. var selector, panel, panelId,
  6. anchorId = $( anchor ).uniqueId().attr( "id" ),
  7. tab = $( anchor ).closest( "li" ),
  8. originalAriaControls = tab.attr( "aria-controls" );

  10. // inline tab
  11. if ( isLocal( anchor ) ) {
  12. selector = anchor.hash;
  13. panel = that.element.find( that._sanitizeSelector( selector ) );
  14. // remote tab
  15. [...]
  16. },
(marked bold)

What would be the best way to achieve what I need? I was thinking about adding an option (container id for panels) and change this piece of code to check for that specific option || that.element. Would this be something worth adding as a CR / FR?

I want to avoid forking the code and adding dependencies when upgrading jQuery UI. On the other hand, currently it's more important to change the jQuery source code rather than to refactor the markup I currently have.

I'm on the latest jQuery (1.9.1) and jQuery UI (1.10.2)

Appreciate your help and answers.

Thanks