EZ Tabs jQuery Plugin

Table of contents

  1. About the EZ Tabs jQuery plugin
  2. How to use the plugin
  3. Options
  4. Download
  5. Demos
  6. Contact me

1. About the EZ Tabs jQuery plugin

The plugin was designed to help you design tabbed content boxes following a few simple steps.

The MIT License (MIT)

Copyright (c) 2015 Razvan Zamfir

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

2. How to use the plugin

Basic usage:

1. Include the latest (or simply, your favorite) version of the jQuery library right after the closing tag in your html document:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

2. Bellow that line, add the jquery.eztabs.min.js file:

<script type="text/javascript" src="js/jquery.eztabs.min.js"></script> 3. Include the plugin's stylesheet: <link rel="stylesheet" type="text/css" href="css/tabs.css">

4. Make a div and give it any id or class you want; this div will contain all the html elements of the tab set. We will be using the class "tabset" in our example implementation. Inside this container div make an unordered list and asign it the class "ez_tabs". This list will serve as navigation.

5. Under the unordered list with the class of "ez_tabs", make the container of the elements for which you made the navigation at step 3. Asign the class "ez_content" to this container. Put the content inside this div.

6. Attach the plugin to the container of both the navigation and the content.

<script type="text/javascript">  $(function() {    $('.tabset').eztabs();  }); </script">

3. Options

Option Type Value Role
tabsList string The default value is ".ez_tabs". It represents the class name of the list of links you wish to use as the tabs. You can change this selector with any other you desire.
boxContainer string The default value is ".ez_content". It represents the class name of the tabbed content's container. You can change this selector with any other you desire.
animation string none / slideUpDown / slideLeftRight It sets the animation type. Default is "none".
animationTime integer 500 The duration of the animation. Default is 500.
fullWidthTabs boolean true or false If set to true, it makes the tabs streach 100% of the available space. Default is true.

4. Download

Click the button bellow to download the plugin files. Enjoy!

Download

5. Demos

1.Tabs aminated from left to right, in 200 milliseconds.

<script type="text/javascript">  $(function() {    $('.tabset').eztabs({     animation:'slideLeftRight',     animationTime : 200    });  }); </script">
  • Description
  • Delivery
  • Composition

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui. Nam scelerisque elit vitae lacus gravida, eget sodales nibh faucibus. Nulla elit sapien, molestie in mattis eget, consectetur vitae ipsum. Donec ut placerat magna, ut sodales tortor. Sed quis turpis tincidunt, fringilla felis ut, venenatis nisi. Proin egestas viverra nulla, nec dignissim nisi molestie eget.

  • Cotton 80%
  • Cotton 10%
  • Elastan 10%

2. Custom navigation and content selectors. Default animation.

See the demo HERE.

3. Custom navigation and content selectors, tabs aligned to the left. Animation: slide up/down.

See the demo HERE.

6. Contact me

Please help me make the plugin better. Write to me at razvan.zamfir80@gmail.com about any bugs you may find or any improvement ideas you might have.

Thank you!