❤
npm
Sign UpSign In

periodicjs.component.tabs

1.1.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i periodicjs.component.tabs

Repository

github.com/typesettin/component.tabs

Homepage

github.com/typesettin/component.tabs

Weekly Downloads

2

Version

1.1.0

License

none

Last publish

Collaborators

  • yawetse
Try on RunKit
Report malware