node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

periodicjs.component.tabs

component.tabs

100% width tabbed content with some example media queries for smaller screens. Inspired by Responsive full width tabs

API Documenation

Example

Check out example/index.html, the example javascript for the example page is resources/js/example_src.js

Installation

$ npm install periodicjs.component.tabs

The tab component is a browserify javascript module.

Usage

JavaScript

var ComponentTabs = require('periodicjs.component.tabs'),
    myTabs;
//initialize nav component after the dom has loaded 
window.addEventListener('load',function(){
    var tabelement = document.getElementById('tabs');
    myTabs = new ComponentTabs(tabelement);
    //expose your nav component to the window global namespace 
    window.myNav = myNav;
});

HTML

<html>
    <head>
   <title>Your Page</title>
   <link rel="stylesheet" type="text/css" href="[path/to]/component.tabs.css">
   <script src='[path/to/browserify/bundle].js'></script> 
    </head>
    <body>
         <div id="tabs" class="tabs">
      <nav>
        <ul>
          <li>
            tab1
          </li>
          <li>
            tab2
          </li>
          <li>
            tab3
          </li>
        </ul>
      </nav>
      <div class="content">
        <section id="section-1">
          any html
        </section>
        <section id="section-2">
          can go in here
        </section>
        <section id="section-3">
          this is fully responsive
        </section>
      </div>
      <!-- /content -->
    </div>
    <!-- /tabs -->
    </body>
</html>

API

myNav.showTab(1); //show tab at index '1' 

Development

Make sure you have grunt installed

$ npm install -g grunt-cli

Then run grunt watch

$ grunt watch

Notes

  • The Tab Module uses Node's event Emitter for event handling.
  • The Template Generator uses EJS, but you can generate your own mark up
  • The less file is located in resources/stylesheets