• midori
• midoriAjax
• midoriAutoComplete
• midoriDragDrop
• midoriFX
• midoriHistory
• midoriInlineEdit
• midoriPopup
• 
  midoriTab
  • init
• midoriTableSelection

midoriTab

midoriTab automatically converts all elements that have the class 'tab-set' to tabs that reveal their content when clicked.

• init()
  Converts all elements that have the class 'tab-set' to tabs.

  Expects a structure similar to the one below for the tabs:

  <div id="fruits" class="tab-set">
     <ul>
        <li class="tab-selected"><a href="#apple">Apple</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#banana">Banana</a></li>
     </ul>
  </div>

  A container element with an id (in this case 'fruits') and the class 'tab-set' must enclose several links. The id of the container is used internally to distinguish tab sets since there can be more than one.

  You can mark a tab as selected by using the 'tab-selected' class.

  The value of the href attribute is used to associate the tabs with their content (see below).

  <div class="tab-content">
     <div id="apple">Apples are red.</div>
     <div id="orange" style="display: none">Oranges are orange.</div>
     <div id="banana" style="display: none">Bananas are yellow.</div>
  </div>

  Example:

  • Apple
  • Orange
  • Banana

  Apples are red.

  Oranges are orange.

  Bananas are yellow.

   

  midori.addEventListener(window, 'ready', function (e) {
     midoriTab.init() } );

  Note: The CSS-styling of the above tabs is based on an article by Douglas Bowman, and you can see the CSS rules used for the above example by clicking here.