<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>
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' );
@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; }