Author: | prog666 |
---|---|
Views Total: | 1,430 views |
Official Page: | Go to website |
Last Update: | September 14, 2015 |
License: | MIT |
Preview:

Description:
A simple, AJAX-enabled, AMD-compatible tabs component made for both ECMAScript 6 and 5.
How to use it:
Include the tabs.js (or tabs.es5.js) on your webpage.
<script src="/path/to/tabs.es5.js"></script>
Create navigation and content for the tabs.
<div class="tabs"> <div class="tabs__toggle tabs__toggle_active">tab 1</div> <div class="tabs__toggle">tab 2</div> <div class="tabs__tab">tab 1 content</div> <div class="tabs__tab">tab 2 content</div> </div>
Initialize the tabs system.
var initTabs = module.exports['default']; initTabs('.tabs');
Load external data sources using Html5 data attribute.
<div class="tabs"> <div class="tabs__toggle tabs__toggle_active">tab 1</div> <div class="tabs__toggle">tab 2</div> <div class="tabs__tab">tab 1 content</div> <div class="tabs__tab" data-src="1.html">tab 2 content</div> </div>
Style the tabs system whatever you like.
.tabs__toggle { display: inline-block; cursor: pointer; color: #ccc; margin: 0 5px; padding: 5px 10px; border: 1px solid #000; } .tabs__toggle_active { cursor: default; color: #fff; border: 1px solid #FC6D58; } .tabs__tab { padding-top: 10px; } .tabs { border: 1px solid #ccc; padding: 10px; margin: 20px auto; max-width: 400px; }
Hey, I’d be glad if you contribute nice example and readme for my module. I can also help you with this example, there’s not everything correct.
Yo gimme your number …