Create ordered tabbed content in HTML
JavaScript HTML CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
otabs.js
otabs.min.js
package.json

README.md

#oTabsJS v1.3.0 Library to create ordered/linked tabbed content in HTML

##Synopsis This simple Javascript library has been created as a simple solution when you need to display tabbed content in the same order of a list. It is meant to speed up the html markup process and avoid list-content reference errors.

##Install ####Using npm

npm install -S otabs-js

####Using bower

bower install otabs-js

####Manually Simply include the js file (or minified js) in your html:

<script src="otabs.min.js"></script>

##Activate Place this JS line where you want oTabs to start working:

<script>
  new oTabs().init();
</script>

##How to use In your html create a list with this template:

<ul class="otabs">
  <li>..</li>
  ...
  <li>..</li>
</ul>

And then use this template where you want your tabbed content to appear:

<div class="otabs_content">
  <div>..</div>
  ...
  <div>..</div>
</div>

NOTE: you can use whatever type of HTML tag for the content (div is just an example)

####List-container binding If you're using this tool more than once in a page you'll need to bind each list with the appropriate tabbed content. You can simply do that using rel and id like this:

<ul class="otabs" rel="WHATEVER_YOU_WANT">
  ...
</ul>
...
<div class="otabs_content" id="WHATEVER_YOU_WANT">
  ...
</div>

##Secondary features ####Specific selection You can select a specific tab using the data-select attribute. Examples:

<ul class="otabs" data-select="42">

Valid values (default is 0):

  • a number between 0 to N
  • last for the last tabbed item

####Reverse order You can reverse the display order of the content to be in the reversed order of the menu by using the reverse class like this:

<ul class="otabs reverse">

####Option-content binding If you don't want oTabsJS to automatically bind each option with the corresponding content in order, you can manually bind them adding the link class to the menu and using rel and id:

<ul class="otabs link">
  <li rel="content1">..</li>
  <li rel="content2">..</li>
  <li rel="content3">..</li>
</ul>
<div class="otabs_content">
  <div id="content2">..</div>
  <div id="content3">..</div>
  <div id="content1">..</div>
</div>

####Manually refresh oTabs on DOM changes

<script>
  var otabs = new oTabs().init();
  // ... whatever ...
  otabs.update();
</script>

##Styling To target this in your CSS you could use the .otabs class for the menu and .otabs_content for the area where the content displays.

The selected tab has the .active class and you can simply target the other tabs with :not(.active).

##Compile for production If you want to build your own minified version of this library you can do that using npm and gulp.

Install the dependencies (you'll need npm): npm install

Execute gulp to generate the file otabs.min.js (you'll need gulp): gulp

##Updating ####From v < 1.3.x Simply add this line where you want otabs to start working:

<script>new oTabs().init();</script>

##Changelog ####v1.3.0 [2016.10.11]

  • manual activation
  • manual refresh
  • npm and gulp for distribution
####v1.2.1 [2016.03.24]
  • [bug fix] list-container binding not necessary
####v1.2 [2016.03.24]
  • Added linked mode
  • Sample now available in the 'demo' folder
  • General code refactoring
  • [bug fix] data-select=last
  • [bug fix] Multiple use in page
####v1.1 [2016.03.12]
  • Removed jQuery dependency
  • List-content binding is now optional
####v1.0 [2016.03.11]
  • First version

##License MIT License