{{wrap}}

by abernier

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div id="tabsView"></div>
 
<script id="my-tabs" type="text/x-jquery-tmpl">
{{wrap(null, {state: $item.state}) "#tabs-layout"}}
    <h3>Tab 1</h3>
    <div>
        Content of tab 1.
        Lorem ipsum dolor <b>sit</b> amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </div>
 
    <h3>Tab 2</h3>
    <div>
        Content of tab 2.
        Lorem ipsum dolor <b>sit</b> amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.   
    </div>
 
    <h3>Tab 3</h3>
    <div>
        Content of tab 3. 
        Lorem ipsum dolor <b>sit</b> amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </div>
{{/wrap}}
</script>
 
<script id="tabs-layout" type="text/x-jquery-tmpl">
<section class="tabs">
    <nav><ul>
        {{each $item.html("h3", true)}}<li{{if $index === $item.state}} class="active"{{/if}}>
            ${$value}
        </li>{{/each}}
    </ul></nav>
    <article>
        {{html $item.html("div")[$item.state]}}
    </article>
</section>
</script>

CSS

body {background-color:gray;}

.tabs nav li,
.tabs article {background-color:white; border:1px solid;}

.tabs nav ul {list-style:none; padding-left:0; padding-right:0; margin-top:0; margin-bottom:0;}
.tabs nav li {display:inline-block; vertical-align:bottom; padding:4px; border-bottom:none; opacity:.5; font-size:80%; position:relative; bottom:-1px; cursor:pointer;}
.tabs nav li.active {opacity:1; font-size:100%; cursor:normal;}

.tabs article {padding:10px;}

JavaScript

// Global for tracking selected tab
var selectedTabIndex = 0;
 
// Render the tab strip
$("#my-tabs").tmpl(null, {state: 1}).appendTo("#tabsView");
 
// When a tab is clicked, update the tab strip
$("#tabsView").delegate(".tabs nav li:not('.active')", "click", function () {
    var tmplItem = $.tmplItem(this);
    //console.log(this, $.tmplItem(this).data);
    tmplItem.state = $(this).index();
    tmplItem.update();
});