periodicjs.component.tabs
v1.1.0
Published
The header is composed of various effects. It has a perspective wrapper, a front and a bottom (for the 3d rotation)
Downloads
10
Maintainers
yawetseReadme
component.tabs
100% width tabbed content with some example media queries for smaller screens. Inspired by Responsive full width tabs
Example
Check out example/index.html, the example javascript for the example page is resources/js/example_src.js
Installation
$ npm install periodicjs.component.tabsThe 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-cliThen 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