Skip to content

Instantly share code, notes, and snippets.

@mulderu

mulderu/jquery-tmpl-wrap-example.html

Created August 30, 2016 01:04
Show Gist options
  • Save mulderu/2debd05f45e84bf8b075a8bbf0998429 to your computer and use it in GitHub Desktop.
Save mulderu/2debd05f45e84bf8b075a8bbf0998429 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jquery-tmpl-wrap-example.html
<!--
ref : http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates
-->
<body>
<div id="tabsView"></div>
<script id="tabsContent" type="text/x-jquery-tmpl">
{{wrap "#tabsWrap"}}
<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="tabsWrap" type="text/x-jquery-tmpl">
<div class="tabs">
{{each $item.html("h3", true)}}
<div class="tabState_${$index === selectedTabIndex}">
${$value}
</div>
{{/each}}
</div>
<div class="tabBody">
{{html $item.html("div")[selectedTabIndex]}}
</div>
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script type="text/javascript">
// Global for tracking selected tab
var selectedTabIndex = 0;
// Render the tab strip
$("#tabsContent").tmpl().appendTo("#tabsView");
// When a tab is clicked, update the tab strip
$("#tabsView")
.delegate(".tabState_false", "click", function () {
var templateItem = $.tmplItem(this);
selectedTabIndex = $(this).index();
templateItem.update();
});
</script>
</body>
@mulderu
Copy link
Author

mulderu commented Aug 30, 2016

make tab ui to simple

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment