tab. with fade. and with transition. also supports hashchange event.
- basic
- useFade
- useFade/useTransition
- methods
- option - allow_noactive
- adjustWrapperHeight demo
- hashchange demo
See demos for details.
$('#tabset').tabify({ selector_tab: '.tab', selector_content: '.tabcontentdiv', tab_activeClass: 'tab-active', content_activeClass: 'tabcontentdiv-active' });
$('#tabset').tabify({ selector_tab: '.tab', selector_contentwrapper: '.tabcontentwrapper', selector_content: '.tabcontentdiv', tab_activeClass: 'tab-active', content_activeClass: 'tabcontentdiv-active', useFade: true });
Load jquery.transit before this library.
If the browser doesn't support transition, this lib uses jQuery animation instead.
$('#tabset').tabify({ selector_tab: '.tab', selector_contentwrapper: '.tabcontentwrapper', selector_content: '.tabcontentdiv', tab_activeClass: 'tab-active', content_activeClass: 'tabcontentdiv-active', useFade: true, useTransition: true });
var $tabset = $('#tabset'); $tabset.tabify({ selector_tab: '.tab', selector_contentwrapper: '.tabcontentwrapper', selector_content: '.tabcontentdiv', tab_activeClass: 'tab-active', content_activeClass: 'tabcontentdiv-active', useFade: true, useTransition: true }); $tabset.bind('tabify.switch', function(e, data) { console.log('switch fired.', data); }); $tabset.bind('tabify.beforeswitchanimation', function(e, data) { console.log('beforeswitchanimation fired.', data); }); $tabset.bind('tabify.afterswitchanimation', function(e, data) { console.log('afterswitchanimation fired.', data); });
or if you loaded EveEve before tabify, you can do
var tab = $tabset.data('tabify');
tab.on('tabify.switch', function(data) {
console.log('switch fired.', data);
});
tab.on('tabify.beforeswitchanimation', function(data) {
console.log('beforeswitchanimation fired.', data);
});
tab.on('tabify.afterswitchanimation', function(data) {
console.log('afterswitchanimation fired.', data);
});
- jQuery 1.9.1
- EveEve - if you want to use hashchange or instance event feature.
- jquery.transit - if you want to use transition.
- jQuery hashchange event - if you want to support old browsers that lacks hashchange event support.
IE6+ and other new browsers.
Copyright (c) 2013 "Takazudo" Takeshi Takatsudo
Licensed under the MIT license.
Use