amazingSurge/jquery-asTabs


A jquery plugin that help show tabs in the page.

License: GPL-2.0

Language: JavaScript

Keywords: jquery-plugin, tabs


jQuery asTabs

The powerful jQuery plugin that creates a tab. Project page and demos
Download: jquery-asTabs-master.zip


Features

  • History support — asTabs can handle browser's back and forward buttons
  • AJAXed asTabs support — ajax load content support
  • Keyboard navigation support — use Arrow left/right to navigate
  • Lightweight size — 1 kb gzipped

Dependencies

Usage

Import this libraries:

  • jQuery
  • jquery-asTabs.min.js

And CSS:

  • jquery-asTabs.css - desirable if you have not yet connected one

Create base html element:

<ul class="demo asTabs">
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>
<div class="panes">
    <div>panes</div>
    <div>panle2</div>
    <div>panle3</div>
</div>

Initialize asTabs:

$(".demo").asTabs({contentSelector: '.panes'});

Or initialize asTabs with custom settings:

$(".demo").asTabs({
        namespace: 'asTabs',  // namespace for css class
        navSelector: null,
        contentSelector: '+',
        skin: null,         // set custom skin
        initialIndex: 0,    // set initial index when first open
        ajax: false,        // open ajax load function
        cached: false,      // if true, cach ajax load content after first loaded
        history: false,     // enable history or not
        keyboard: false,    // keyboard navigation support
        effect: false,      // set transition effect
        duration: 300,      // set transition duration time in millisecond
        event: 'click'      // change index use 'click' or 'mouseover'
});

Settings

Property Default Description
namespace "asTabs" Optional property, set a namspace for css class, for example, we have .asTabs_active class for active effect, if namespace set to 'as-asTabs', then it will be .as-asTabs_active
contentSelector '+' Optional property, specify the content to asTabs
skin null Optional property, set transition effect, it works after you load specified skin file
initialIndex 0 Optional property, set initial index when asTabs initilize
ajax false Optional property, if true, it will load content with ajax, the url attached in tab list element's data-href
cached false Optional property, it works only when ajax is set to true, if true, asTabs will cach loaded content
history false Optional property, if true, it will enable history function
keyboard false Optional property, if true , keyboard navigation function will be enabled
effect 'none' Optional property, set transition effect
duration 300 Optional property, set transition effect time in millisecond
event 'click' Optional property, the way to active asTabs index, optioal 'mouseover'
onInit null Optional property, callback, call when asTabs is initilized
onInit null Optional property, callback, call when tab is initilize
onReady null Optional property, callback, call when tab is ready
onActive null Optional property, callback, call when tab is actived

Public methods

jquery asTabs has different methods , we can use it as below :

// active index
$(".demo").asTabs("active", index);

// get all asTabs element
$(".demo").asTabs("getasTabs");

// get all panes element
$(".demo").asTabs("getPanes");

// get current index
$(".demo").asTabs("getIndex");

// get current pane element
$(".demo").asTabs("getCurrentPane");

// get current tab elemnt
$(".demo").asTabs("getCurrentTab");

// goto the next tab, the last will goto the first
$(".demo").asTabs("next");

// goto the prevous tab, the first will goto the last
$(".demo").asTabs("prev");

// disable the tabs
$(".demo").asTabs("disable");

// enable the tabs
$(".demo").asTabs("enable");

// add a new tab to the bottom of the tabs
$(".demo").asTabs("append", "title", "content");

// add a new tab after first tab
$(".demo").asTabs("add", "title", "content", 1);

// remove the second tab
$(".demo").asTabs("remove", 1);

// remove asTabs Dom element and unbound all events
$(".demo").asTabs("destroy");

Event / Callback

  • asTabs::init: trigger when asTabs initilize
  • asTabs::ready: trigger when asTabs is ready
  • asTabs::active: trigger when asTabs is selected
  • asTabs::update: trigger when tab is changed

how to use event:

$(document).on('asTabs::init', function(event,instance) {
    // instance means current asTabs instance 
    // some stuff
});

Browser support

jquery-asTabs is verified to work in Internet Explorer 7+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser and others) is also works.

Author

amazingSurge

License

jQuery-asTabs plugin is released under the GPL licence.

Project Statistics

Sourcerank 5
Repository Size 719 KB
Stars 8
Forks 8
Watchers 7
Open issues 1
Dependencies 21
Contributors 5
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

leoylin TheCreation joe iejerry KaptinLin

Something wrong with this page? Make a suggestion

Last synced: 2017-11-25 06:54:31 UTC

Login to resync this repository