stylie.tabs
Version:
100% width tabbed content with some example media queries for smaller screens.
140 lines (105 loc) • 3.94 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Index</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Index</h1>
<h3> </h3>
<section>
<article><h1>stylie.tabs</h1>
<p>100% width tabbed content with some example media queries for smaller screens.
Inspired by <a href="http://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/">Responsive full width tabs</a></p>
<p> <a href="https://github.com/typesettin/stylie.tabs/blob/master/doc/api.md">API Documenation</a></p>
<h2>Example</h2>
<p>Check out <code>example/index.html</code>, the example javascript for the example page is <code>resources/js/example_src.js</code></p>
<h2>Installation</h2>
<pre><code>$ npm install stylie.tabs</code></pre>
<p>The tab component is a browserify javascript module.</p>
<h2>Usage</h2>
<p><em>JavaScript</em></p>
<pre><code class="lang-javascript">var StylieTabs = require('stylie.tabs'),
myTabs;
//initialize nav component after the dom has loaded
window.addEventListener('load',function(){
var tabelement = document.getElementById('tabs');
myTabs = new StylieTabs(tabelement);
//expose your nav component to the window global namespace
window.myNav = myNav;
});</code></pre>
<p><em>HTML</em></p>
<pre><code class="lang-html"><html>
<head>
<title>Your Page</title>
<link rel="stylesheet" type="text/css" href="[path/to]/stylie.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></code></pre>
<h2>API</h2>
<pre><code class="lang-javascript">myNav.showTab(1); //show tab at index '1'</code></pre>
<h2>Development</h2>
<p><em>Make sure you have grunt installed</em></p>
<pre><code>$ npm install -g grunt-cli</code></pre>
<p>Then run grunt watch</p>
<pre><code>$ grunt watch</code></pre>
<p>For generating documentation</p>
<pre><code>$ grunt doc
$ jsdoc2md lib/**/*.js index.js > doc/api.md</code></pre>
<h2>Notes</h2>
<ul>
<li>The Tab Module uses Node's event Emitter for event handling.</li>
<li>The Template Generator uses EJS, but you can generate your own mark up</li>
<li>The less file is located in <code>resources/stylesheets</code></li>
</ul></article>
</section>
</div>
<nav>
<h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="StylieTabs.html">StylieTabs</a></li></ul>
</nav>
<br clear="both">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Wed May 06 2015 13:46:05 GMT-0400 (EDT)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>