567 lines
15 KiB
JavaScript
567 lines
15 KiB
JavaScript
(function($) {
|
|
$.fn.skinableTabs = function(options) {
|
|
var opts = $.extend({}, $.fn.skinableTabs.defaults, options);
|
|
return new TabSkinsClass($(this), opts);
|
|
};
|
|
$.fn.skinableSkins = function(options) {
|
|
return $(this).skinableTabs(options);
|
|
};
|
|
$.fn.skinableTabs.defaults = {
|
|
skin : 'skin1',
|
|
position : 'top',
|
|
effect : 'simple_fade',
|
|
persist_tab : 1,
|
|
skin_path : ''
|
|
};
|
|
var TabSkinsClass = function(el, opts) {
|
|
el.hide();
|
|
this.showTooltip = function(text) {
|
|
global_showTooltip(text);
|
|
}
|
|
this.showTab = function(name) {
|
|
global_showOne(name);
|
|
}
|
|
var global_container = el;
|
|
var global_opts = opts;
|
|
var global_tabs = [];
|
|
var global_selectedTab = false;
|
|
var global_htmlSelectedTab = false;
|
|
var global_step = 0;
|
|
var __global_construct = function() {
|
|
global_container
|
|
.children('.content_holder')
|
|
.wrapInner(
|
|
'<div class="content_holder_inner" style="overflow: hidden; position: relative; z-index: 1; padding: 10px 0px;" />');
|
|
global_container.css('overflow', 'hidden');
|
|
global_container.css('position', 'relative');
|
|
global_container.addClass('tabs_wrapper')
|
|
.addClass(global_opts.skin).addClass(global_opts.position);
|
|
global_container.children('ul').each(function() {
|
|
global_loadSkinCss(global_opts.skin, global_opts.position);
|
|
$(this).addClass('tabs_header');
|
|
global_createHeader(this);
|
|
global_showOne();
|
|
});
|
|
$(global_container)
|
|
.append(
|
|
'<div style="height: 0px; font-size: 1px; line-height: 1px; clear: both;"></div>');
|
|
};
|
|
var myRC = function(name) {
|
|
var nameEQ = name + "=";
|
|
var ca = document.cookie.split(';');
|
|
for (var i = 0; i < ca.length; i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0) == ' ')
|
|
c = c.substring(1, c.length);
|
|
if (c.indexOf(nameEQ) == 0)
|
|
return c.substring(nameEQ.length, c.length);
|
|
}
|
|
return null;
|
|
};
|
|
var setRC = function(c_name, value, exdays) {
|
|
var exdate = new Date();
|
|
exdate.setDate(exdate.getDate() + exdays);
|
|
var c_value = escape(value)
|
|
+ ((exdays == null) ? "" : "; expires="
|
|
+ exdate.toUTCString());
|
|
document.cookie = c_name + "=" + c_value;
|
|
};
|
|
var global_loadSkinCss = function(skin_name, position) {
|
|
//var url = global_opts.skin_path + 'skins/' + skin_name + '/tab.css';
|
|
var url = '/style/tab.css';
|
|
if (document.createStyleSheet) {
|
|
document.createStyleSheet(url);
|
|
} else {
|
|
$(
|
|
'<link rel="stylesheet" type="text/css" href="' + url
|
|
+ '" />').appendTo('head');
|
|
}
|
|
};
|
|
var global_createHeader = function(list_obj) {
|
|
$(list_obj).children('li').each(function() {
|
|
var $_this = $(this);
|
|
$_this.addClass('tab_header_item');
|
|
$_this.prepend('<span class="header_item_before"></span>');
|
|
$_this.append('<span class="header_item_after"></span>');
|
|
$_this.children('a').each(function() {
|
|
var $_a_this = $(this);
|
|
var tab_id = global_getHref($_a_this.attr('href'));
|
|
$_a_this.addClass(global_getHeaderClass(tab_id));
|
|
if ($_a_this.parent().hasClass('tab_selected')) {
|
|
global_htmlSelectedTab = {
|
|
id : tab_id,
|
|
a_href : $_a_this
|
|
};
|
|
}
|
|
global_createTabContent(tab_id, $_a_this);
|
|
$_a_this.click(function(ev) {
|
|
if (!$_a_this.parent().hasClass('tab_selected')) {
|
|
global_showTabContent(tab_id, false, $_a_this);
|
|
}
|
|
ev.preventDefault();
|
|
return false;
|
|
});
|
|
});
|
|
});
|
|
var loaded_tabs = global_tabs;
|
|
var first_tab = global_tabs[0].id;
|
|
var last_tab = global_tabs[global_tabs.length - 1].id;
|
|
$('a[href$="' + first_tab + '"]').parent().addClass('first_tab');
|
|
$('a[href$="' + last_tab + '"]').parent().addClass('last_tab');
|
|
};
|
|
var global_getHref = function(loc) {
|
|
if (loc.match('#')) {
|
|
loc = '#' + loc.split('#')[1];
|
|
}
|
|
return loc;
|
|
};
|
|
var global_showTooltip = function(text) {
|
|
var $_tooltip = $('#tooltip');
|
|
var b = new Boolean($_tooltip);
|
|
if (b) {
|
|
$_tooltip.html(text).show(500).delay(3000).hide(800);
|
|
}
|
|
};
|
|
var global_showTabContent = function(tab_id, no_effect, a_href) {
|
|
if (global_opts.persist_tab) {
|
|
setRC('skinableTabs_sel', tab_id.replace('#', ''), 10);
|
|
}
|
|
var ajax_rel = a_href.attr('rel');
|
|
if (ajax_rel != undefined) {
|
|
var ajax_loaded = a_href.attr('ajax_loaded');
|
|
ajax_loaded = typeof (ajax_loaded) != 'undefined' ? ajax_loaded
|
|
: 0;
|
|
if (ajax_loaded == 0) {
|
|
a_href.attr('ajax_loaded', 1);
|
|
$.get(ajax_rel, function(data) {
|
|
$(tab_id).html(data);
|
|
});
|
|
}
|
|
}
|
|
if (global_step != 0) {
|
|
global_showTooltip('There is an animation in progress.<br /> To prevent animation overlapping, you should wait until it\'s finished.');
|
|
return false;
|
|
} else {
|
|
global_step++;
|
|
}
|
|
no_effect = typeof (no_effect) != 'undefined' ? no_effect : false;
|
|
global_hideSelectedTab();
|
|
if (!no_effect) {
|
|
global_animateEffect(tab_id, global_opts.effect, 'show');
|
|
} else {
|
|
$(tab_id).show();
|
|
global_step = 0;
|
|
}
|
|
$('.' + global_getHeaderClass(tab_id)).parent().addClass(
|
|
'tab_selected');
|
|
global_registerSelected(tab_id);
|
|
};
|
|
var global_getHeaderClass = function(tab_id) {
|
|
var string = tab_id.replace('#', '') + '-tab_header';
|
|
return string;
|
|
};
|
|
var global_hideSelectedTab = function() {
|
|
if (global_selectedTab) {
|
|
global_animateEffect(global_selectedTab, global_opts.effect,
|
|
'hide');
|
|
$('.' + global_getHeaderClass(global_selectedTab)).parent()
|
|
.removeClass('tab_selected');
|
|
}
|
|
};
|
|
var global_registerSelected = function(tab_id) {
|
|
global_selectedTab = tab_id;
|
|
};
|
|
var global_stopInAnimation = function() {
|
|
global_inAnimation = false;
|
|
};
|
|
var effectDone = function() {
|
|
if (global_step == 2) {
|
|
global_step = 0;
|
|
} else {
|
|
global_step++;
|
|
}
|
|
};
|
|
var global_animateEffect = function(tab_id, effect, do_show) {
|
|
global_inAnimation = true;
|
|
var to_show = tab_id;
|
|
var to_hide = tab_id;
|
|
var $_to_show = $(tab_id);
|
|
var $_to_hide = $_to_show;
|
|
switch (effect) {
|
|
case 'basic_display':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('display', 'block');
|
|
effectDone();
|
|
} else {
|
|
$_to_hide.css('display', 'none');
|
|
effectDone();
|
|
}
|
|
break;
|
|
case 'simple_fade':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('fade', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('fade', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
case 'hide_and_seek':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('fold', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'relative').effect('fold', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
case 'evanescence':
|
|
if (do_show == 'show') {
|
|
$_to_show.toggle('slideRight', null, 2500);
|
|
setTimeout(function() {
|
|
effectDone();
|
|
}, 1500);
|
|
} else {
|
|
$_to_hide.effect('slideRight', {
|
|
mode : 'hide'
|
|
}, 1500, effectDone);
|
|
}
|
|
break;
|
|
case 'transfading_down':
|
|
if (do_show == 'show') {
|
|
$_to_show.show(500);
|
|
setTimeout(function() {
|
|
effectDone();
|
|
}, 500);
|
|
} else {
|
|
$_to_hide.effect('slideRight', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'up',
|
|
distance : 50
|
|
}, 500, effectDone);
|
|
}
|
|
break;
|
|
case 'transfading_up':
|
|
if (do_show == 'show') {
|
|
$_to_show.show(500);
|
|
setTimeout(function() {
|
|
effectDone();
|
|
}, 500);
|
|
} else {
|
|
$_to_hide.hide(500);
|
|
setTimeout(function() {
|
|
effectDone();
|
|
}, 500);
|
|
}
|
|
break;
|
|
case 'overlapping':
|
|
if (do_show == 'show') {
|
|
$_to_show.toggle('blind', null, 1500);
|
|
setTimeout(function() {
|
|
effectDone();
|
|
}, 1000);
|
|
} else {
|
|
$_to_hide.effect('blind', {
|
|
mode : 'hide'
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
case 'horizontal_bouncer':
|
|
if (do_show == 'show') {
|
|
$_to_show.toggle('bounce', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 100
|
|
}, 1000);
|
|
setTimeout(function() {
|
|
effectDone();
|
|
}, 2500);
|
|
} else {
|
|
$_to_hide.effect('slideRight', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'up',
|
|
distance : 50
|
|
}, 500, effectDone);
|
|
}
|
|
break;
|
|
case 'vertical_bouncer':
|
|
if (do_show == 'show') {
|
|
$_to_show.slideDown(500).effect('bounce', {
|
|
times : 2,
|
|
direction : 'up',
|
|
distance : 30
|
|
}, 500, effectDone);
|
|
} else {
|
|
$_to_hide.hide(500, effectDone);
|
|
}
|
|
break;
|
|
case 'slide_right':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('slide', {
|
|
mode : 'show',
|
|
direction : 'left'
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('slide', {
|
|
mode : 'hide',
|
|
direction : 'right'
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
case 'slide_left':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('slide', {
|
|
mode : 'show',
|
|
direction : 'right'
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('slide', {
|
|
mode : 'hide',
|
|
direction : 'left'
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
case 'slide_up':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('clip', {
|
|
mode : 'show'
|
|
}, 1500, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').hide(500, effectDone);
|
|
}
|
|
break;
|
|
case 'fade_slide_left':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('drop', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 100
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'relative').hide(5, effectDone);
|
|
}
|
|
break;
|
|
case 'fade_slide_right':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('drop', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'left',
|
|
distance : 100
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('drop', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 500, effectDone);
|
|
}
|
|
break;
|
|
case 'fade_slide_up':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('drop', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'down',
|
|
distance : 100
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('drop', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'up',
|
|
distance : 50
|
|
}, 500, effectDone);
|
|
}
|
|
break;
|
|
case 'fade_slide_down':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('drop', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'up',
|
|
distance : 100
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('drop', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'down',
|
|
distance : 50
|
|
}, 500, effectDone);
|
|
}
|
|
break;
|
|
case 'fireworks':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').css('display',
|
|
'block');
|
|
effectDone();
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('explode', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
case 'puff':
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('slide', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('puff', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 300, effectDone);
|
|
}
|
|
break;
|
|
default:
|
|
if (do_show == 'show') {
|
|
$_to_show.css('position', 'relative').effect('fade', {
|
|
mode : 'show',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
} else {
|
|
$_to_hide.css('position', 'absolute').effect('fade', {
|
|
mode : 'hide',
|
|
times : 2,
|
|
direction : 'right',
|
|
distance : 50
|
|
}, 1000, effectDone);
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
var global_getTabFromUrl = function() {
|
|
var url = document.location.toString();
|
|
var tab = false;
|
|
if (url.match('#')) {
|
|
var tmp = '#' + url.split('#')[1];
|
|
tab = global_getTabFromId(tmp);
|
|
}
|
|
return tab;
|
|
};
|
|
var global_getTabFromId = function(tab_id) {
|
|
var tab = false;
|
|
for (var i = 0; i < global_tabs.length; i++) {
|
|
if (global_tabs[i].id == tab_id) {
|
|
tab = global_tabs[i];
|
|
break;
|
|
}
|
|
}
|
|
return tab;
|
|
}
|
|
var global_showOne = function(tab_id) {
|
|
var a_href = '';
|
|
var tab = false;
|
|
if (global_htmlSelectedTab) {
|
|
global_htmlSelectedTab.a_href.parent().removeClass(
|
|
'tab_selected');
|
|
}
|
|
if (typeof tab_id != 'undefined') {
|
|
var tab = global_getTabFromId(tab_id);
|
|
} else {
|
|
tab_id = '';
|
|
}
|
|
if (tab != false) {
|
|
tab_id = tab.id;
|
|
a_href = tab.a_href;
|
|
} else {
|
|
var tab_in_url = global_getTabFromUrl();
|
|
if (tab_in_url != false) {
|
|
tab_id = tab_in_url.id;
|
|
a_href = tab_in_url.a_href;
|
|
} else if (global_opts.persist_tab && tab_id == '') {
|
|
var temp_tab_id = '';
|
|
temp_tab_id = '#' + myRC('skinableTabs_sel');
|
|
$.each(global_tabs, function(index, item) {
|
|
if (item.id == temp_tab_id) {
|
|
tab_id = item.id;
|
|
a_href = item.a_href;
|
|
}
|
|
});
|
|
}
|
|
if (tab_id == '' && global_htmlSelectedTab) {
|
|
tab_id = global_htmlSelectedTab.id;
|
|
a_href = global_htmlSelectedTab.a_href;
|
|
} else if (tab_id == '') {
|
|
tab_id = global_tabs[0].id;
|
|
a_href = global_tabs[0].a_href;
|
|
}
|
|
}
|
|
global_showTabContent(tab_id, true, a_href);
|
|
};
|
|
var global_createTabContent = function(tab_id, a_href) {
|
|
var $tab_id = $(tab_id);
|
|
$tab_id.addClass('tab_content');
|
|
$tab_id.wrapInner('<div class="inner_content" />');
|
|
$tab_id.hide();
|
|
global_tabs.push({
|
|
id : tab_id,
|
|
a_href : a_href
|
|
});
|
|
};
|
|
var onHashChange = function(event) {
|
|
var getHashValue = function() {
|
|
var arr = window.location.hash.split("#");
|
|
var hasValue = arr[1];
|
|
if (typeof hasValue == "undefined") {
|
|
return false;
|
|
}
|
|
if (hasValue.search('-inpage') > 0) {
|
|
window.location = arr[0] + '#'
|
|
+ hasValue.replace('-inpage', '');
|
|
}
|
|
var hashLen = hasValue.indexOf("?");
|
|
if (hashLen > 0) {
|
|
hasValue = hasValue.substring(0, hashLen);
|
|
}
|
|
return hasValue;
|
|
}
|
|
var lastHash = getHashValue();
|
|
(function watchHash() {
|
|
var hash = getHashValue();
|
|
if (hash !== lastHash) {
|
|
event();
|
|
lastHash = hash;
|
|
}
|
|
var t = setTimeout(watchHash, 100);
|
|
})();
|
|
}
|
|
onHashChange(function() {
|
|
global_showOne();
|
|
});
|
|
__global_construct();
|
|
el.show();
|
|
};
|
|
})(jQuery); |