<ul id="components" class="tabs ui-helper-clearfix"> <li><a href="#model">can.Model</a></li> <li><a href="#view">can.View</a></li> <li><a href="#control">can.Control</a></li> </ul> <div id="model" class="tab"> can.Model is used for getting data and listening to it. </div> <div id="view" class="tab"> can.View is used to present data and update with changes to it. </div> <div id="control" class="tab"> can.Control is used to listen to things. </div> <br/><br/> <ul id="people" class="tabs ui-helper-clearfix"> <li><a href="#brian">Brian</a></li> <li><a href="#justin">Justin</a></li> <li><a href="#mihael">Michael</a></li> </ul> <div id="brian" class="tab"> <img src='http://bitovi.com/images/people/brian.jpg'/> </div> <div id="justin" class="tab"> <img src='http://bitovi.com/images/people/justin.jpg'/> </div> <div id="mihael" class="tab"> <img src='http://bitovi.com/images/people/mihael.jpg'/> </div>
var HistoryTabs = can.Control.extend({ init: function( el ) { // hide all tabs var tab = this.tab; this.element.children( 'li' ).each(function() { tab( $( this ) ).hide(); }); // activate the first tab var active = can.route.attr(this.options.attr); this.activate(active); }, "{can.route} {attr}" : function(route, ev, newVal, oldVal){ this.activate(newVal, oldVal) }, // helper function finds the tab for a given li tab: function( li ) { return $( li.find( 'a' ).attr( 'href' ) ); }, // helper function finds li for a given id button : function(id){ // if nothing is active, activate the first return id ? this.element.find("a[href=#"+id+"]").parent() : this.element.children( 'li:first' ); }, // activates activate: function( active, oldActive ){ // deactivate the old active var oldButton = this.button(oldActive).removeClass('active'); this.tab(oldButton).hide(); // activate new var newButton = this.button(active).addClass('active'); this.tab(newButton).show(); }, "li click" : function(el, ev){ // prevent the default setting ev.preventDefault(); // update the route data can.route.attr(this.options.attr, this.tab(el)[0].id) } }); // configure routes can.route(":component",{ component: "model", person: "mihael" }); can.route(":component/:person",{ component: "model", person: "mihael" }); // adds the controller to the element new HistoryTabs( '#components',{attr: 'component'}); new HistoryTabs( '#people',{attr: 'person'});
@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; } /* end clearfix */