Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Bootstrap Tabs (gallery-bootstrap-tabview) on cdn

Last Updated: 08/15/12

+ 0 -

J. Shirley

YUI Contributor

See 8 more by this user.

Created: 08/15/12
Last CDN Push: 08/22/12
Build Tag: gallery-2012.08.22-20-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0
Free for use.

This is a modification to the core Bootstrap tabs that adapts them to adhere to a native YUI TabView control. The markup changes are quite small, but all styling is kept so it still looks like a nice Bootstrap tabview.

The Bootstrap Tabview allows a quick and easy tabview setup. The tabview bar is separate from the body, with the <A> tag anchor pointing to a div and toggling visibility.



<div data-toggle="tab">

 <ul class="nav nav-tabs" data-toggle="tab">

  <li><a href="#home">Home</a></li>

  <li><a href="#profile">Profile</a></li>

  <li><a href="#messages">Messages</a></li>

  <li><a href="#settings">Settings</a></li>

 </ul>

</div>

Code Sample

<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.08.22-20-00'
}).use('gallery-bootstrap-tabview', function(Y) {
 
    var tabview = new Y.Bootstrap.Tabview({ node: '#myTab' });
    tabview.render();
 
    tabview.selectChild(2); // Select the second tab
});