JavaScript: Tabtastic tab-switcher

From VYRE

Jump to: navigation, search

Contents

Prerequisites

Tabtastic works on the back of the jQuery JavaScript library. Whilst it was written for version 1.2 it is compatible with all newer versions of jQuery and very probably (though not tested) compatible with earlier versions.

JavaScript

// TABTASTIC v.0.1
// Oli Matthews
$(document).ready(function(){
//Set tab and tab-pane classes
  $('.tabbed').addClass('render');
  //Set active tab
  var activeTab = '1';
  $('#tab_'+activeTab).addClass('active');
  $('#panel_'+activeTab).addClass('active');
  $('.tab a').removeAttr('href');
  //Switch tabs/panels
  $('#tabs LI').click(function () {
    $('.tabbed li.active').removeClass('active');
    $(this).addClass('active');
    activeTab = $(this).attr('id');
    var index = activeTab.replace(/\D/g,"");
    $('#panel_'+index).addClass('active');
  });
});

HTML Markup

<div class="data tabbed">
  <ul id="tabs">
    <li id="tab_1"><a href="#panel_1">Tab 1</a></li>
    <li id="tab_2"><a href="#panel_2">Tab 2</a></li>
    <li id="tab_3"><a href="#panel_3">Tab 3</a></li>
    <li id="tab_4"><a href="#panel_4">Tab 4</a></li>
  </ul>
  <ul id="panels">
    <li id="panel_1"><h3>Panel 1</h3></li>
    <li id="panel_2"><h3>Panel 2</h3></li>
    <li id="panel_3"><h3>Panel 3</h3></li>
    <li id="panel_4"><h3>Panel 4</h3></li>
  </ul>
</div>

CSS Code

/**
 TABTASTIC v.0.1
 Oli Matthews
 **/
 
.tabbed UL,LI {list-style:none;margin:0;padding:0;}
#tabs {overflow:hidden;}
.render .tab {float:left;}
.render .tab A {display:block;cursor:pointer;padding:3px 10px;}
#tabs .active A {font-weight:bold;}
#panels  {clear:left;}
 
/** Render panels **/
.render #panels {clear:left;overflow:hidden;}
.render #panels LI {position:absolute;left:10000px;width:700px;}
.render #panels LI.active {position:relative;left:0;}
 
/* Data mode */
.data.render #tabs {margin-bottom:-1px;}
.data.render .tab {background:#ccc;}
.data.render .tab A {background:#ededed;border:1px solid #999;margin-right:-1px;}
.data.render .active A {background:#fff;border-bottom:1px solid #fff;}
.data.render #panels {border:1px solid #999;background:#fff;padding:10px;}
 
/* Image mode */
.image.render #tabs {margin-bottom:5px;}
.image.render #tabs A {padding:0;}

Using Tabtastic in XSL to process data-items

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8"/>
 
<xsl:template match="/">
  <xsl:apply-templates select="/search-results/items">
</xsl:template>
 
<xsl:template match="items">
  <div id="dataTabs" class="data tabbed">
    <!-- Generate Tabs -->
    <ul id="tabs">
      <xsl:apply-templates select="data-item" mode="tabs" />
    </ul>
    <!-- Generate Panels -->
    <ul id="panels">
      <xsl:apply-templates select="data-item" mode="panels" />
    </ul>
  </div>
</xsl:template>
 
<!-- Output tabs -->
<xsl:template match="*" mode="tabs">
  <li id="tab_{position()}"><a href="#panel_{position}"><xsl:value-of select="name" disable-output-escaping="yes"/></a></li>
</xsl:template>
 
<!-- Output panels -->
<xsl:template match="*" mode="panels">
  <li id="panel_{position()}"><xsl:value-of select="description" disable-output-escaping="yes"/></li>
</xsl:template>
 
</xsl:stylesheet>
Retrieved from "http://wiki.vyre.com/index.php/JavaScript:_Tabtastic_tab-switcher"
Personal tools