Tabs Recipe

An example of how to build a simple tab widget using can.Control. Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by donejs

HTML

<script src="http://canjs.com/release/2.0.1/can.jquery.js"></script>
<ul id="tabs" class="tabs ui-helper-clearfix">
  <li><a href="#tab1">Model</a></li>
  <li><a href="#tab2">View</a></li>
  <li><a href="#tab3">Controller</a></li>
</ul>
<div id="tab1" class="tab">
    Model Content
</div>
<div id="tab2" class="tab">
    View Content
</div>
<div id="tab3" class="tab">
    Controller Content
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700);

* {
	font-family: 'Lato', sans-serif;
    font-size: 12px;
    text-shadow: 0 -1px 0 #ffffff;
}
.tabs {
    padding: 0px; 
    margin: 10px 0px 0px 0px;
    position: relative;
    z-index: 1;
    top: 1px;
}
.tabs li {
    float: left;
    padding: 7px 10px;
    background-color: #F6F6F6;
    list-style: none;
    margin-left: 5px;
    border: 1px solid #ccc;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.tabs li a {
    color: #999;
    font-weight: bold;
    text-decoration: none;
}
.tabs li.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}        
.tabs li.active a {
    color: #000;
    cursor: default;
}
.tab {
    border: solid 1px #ccc;
    padding: 10px;
    
}


/* clearfix from jQueryUI */
        .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .ui-helper-clearfix { display: inline-block; }
        /* required comment for clearfix to work in Opera \*/
        * html .ui-helper-clearfix { height:1%; }
        .ui-helper-clearfix { display:block; }

JavaScript

var Tabs = can.Control.extend({
    // initialize widget
    init: function( el ) {
      
      // activate the first tab
      $( el ).children( 'li:first' ).addClass( 'active' );
      
      // hide the other tabs
      var tab = this.tab;
      this.element.children( 'li:gt(0)' ).each(function() {
        tab( $( this ) ).hide();
      });
    },
    
    // helper function finds the tab for a given li
    tab: function( li ) {
      return $( li.find( 'a' ).attr( 'href' ) );
    },
    
    // hides old active tab, shows new one
    'li click': function( el, ev ) {
      ev.preventDefault();
      this.tab( this.element.find( '.active' )
                    .removeClass( 'active' ) ).hide()
      this.tab( el.addClass( 'active' ) ).show();
    }
  });
  
  // adds the controller to the element
  new Tabs( '#tabs' );