Promine

Nossas idéias para você…

Simple tabs – jQuery version rodrigofelix

June 15, 2010 • Development

As I promissed last week, here it is the simple tabs, jQuery version. It follows basically the same idea, but adapted to use the jQuery library.

Try it out:

Download Code

Configuration

  1. Include jquery (tested 1.4.2)
  2. Include promine.simple.tabs.js
  3. Create tab menu and set the menu html id into the promine.simple.tab.js
  4. Important: menu item prefix must be the same the tab content prefix. Ex.: profile_menu -> profile_content

Javascript

$(window).ready(function () {
  initTabs('#tabs');
});
 
function initTabs(tabs_menu){
  if($(tabs_menu).length > 0){
    // listen to some events to implement a tab menu behavior
    $(tabs_menu + ' span').each(function(i, elem){
      $(this).click(function(){
        var blockName = "";
        var auxArray = [];
	$(tabs_menu + ' span').each(function(j, tab){
          // get the corresponding block name according to the tab id
          auxArray = $(this).attr("id").split("_");
          auxArray.pop();
          blockName = (auxArray.length > 1) ? auxArray.join("_") : auxArray[0];
          blockName += "_content";
 
          if($(this).attr("id") == $(elem).attr("id")){
            $(this).addClass("selected");
            $('#' + blockName).show();
          }else{
            $(this).removeClass("selected");
            $('#' + blockName).hide();
          }
        });
      })
    })
  }
}

HTML

<!-- menu -->
 
<div id="tabs">
  <span id="javascript_menu" class="selected">Javascript</span>
  <span id="html_menu">HTML</span>
  <span id="css_menu">CSS</span></div>
 
 
<!-- content -->
 
<div id="javascript_content">Javascript content</div>
 
 
<div id="html_content" style="display: none;">HTML content</div>
 
 
<div id="css_content" style="display: none;">CSS content</div>

CSS

#tabs{
    width:100%;
    border: solid #CCC;
    border-width: 0 0 1px 0;
    height: 26px;
}
 
#tabs span{
    display: block;
    width: 150px;
    float: left;
    height: 20px;
    text-align: center;
    padding: 6px 5px 0 5px;
    cursor: pointer;
    font-weight: bold;
}
 
#tabs span.selected{
    border: solid #CCC;
    border-width: 1px;
    padding: 5px 4px 0 4px;
    border-bottom-color: #fff;
    background: #fff;
}

Popularity: 36% [?]

Tagged as: ,

Write a Comment