93 Zeilen
Kein EOL
2,4 KiB
JavaScript
93 Zeilen
Kein EOL
2,4 KiB
JavaScript
// stereotabs.js v1.0, Mon Jul 23 2007
|
|
//
|
|
// Copyright (c) 2007 Stereo :: Interactive & Design (http://blog.stereodevelopment.com)
|
|
// Author: Scott Meves
|
|
//
|
|
// Inspired by:
|
|
// accordion.js by Kevin P Miller | http://www.stickmanlabs.com
|
|
//
|
|
// tabs.js freely distributable under the terms of an MIT-style license.
|
|
|
|
if (typeof Effect == 'undefined')
|
|
throw("tabs.js requires including script.aculo.us' effects.js library!");
|
|
|
|
var tabset = Class.create();
|
|
|
|
tabset.prototype = {
|
|
tabs: [],
|
|
panels: [],
|
|
showPanel: null,
|
|
currentPanel: null,
|
|
|
|
initialize: function(container, options) {
|
|
this.options = Object.extend({
|
|
classNames: {
|
|
tab: 'tab',
|
|
panel: 'panel',
|
|
tabActive: 'selected'
|
|
},
|
|
ids: {
|
|
tab: 'tab_',
|
|
panel: 'panel_'
|
|
},
|
|
onEvent: 'click',
|
|
effects: true
|
|
}, options || {} );
|
|
|
|
container = $(container);
|
|
|
|
this.tabs = container.select('.'+this.options.classNames.tab);
|
|
this.tabs.each(function(tab) {
|
|
Event.observe(tab, this.options.onEvent, this.activate.bind(this, tab), false);
|
|
}.bind(this));
|
|
|
|
this.panels = container.select('.'+this.options.classNames.panel);
|
|
this.panels.invoke('hide');
|
|
},
|
|
|
|
activate: function(tab) {
|
|
var tabName = tab.id.replace(this.options.ids.tab,'');
|
|
this.currentPanel = this.options.ids.panel+tabName;
|
|
if (this.showPanel == this.currentPanel) {
|
|
return false;
|
|
}
|
|
|
|
if (this.showPanel) {
|
|
if (this.options.effects) {
|
|
new Effect.Fade(this.showPanel, { duration: 0.2, queue: 'front'});
|
|
} else {
|
|
$(this.currentPanel).hide();
|
|
}
|
|
}
|
|
|
|
if (this.options.effects) {
|
|
new Effect.Appear(this.currentPanel, {duration: 0.3, queue: 'end'});
|
|
} else {
|
|
$(this.showPanel).show();
|
|
}
|
|
|
|
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
|
|
tab.addClassName(this.options.classNames.tabActive);
|
|
this.showPanel = this.currentPanel;
|
|
},
|
|
|
|
getHash: function() {
|
|
var hash = window.location.hash;
|
|
return hash.substring(1); // remove #
|
|
},
|
|
|
|
autoActivate: function(tab) {
|
|
var canDoAuto = false;
|
|
var hash = this.getHash();
|
|
if (hash) {
|
|
var autoTab = $(this.options.ids.tab+hash);
|
|
if (autoTab) {
|
|
this.activate(autoTab);
|
|
canDoAuto = true;
|
|
}
|
|
}
|
|
if (!canDoAuto && tab) {
|
|
this.activate(tab);
|
|
}
|
|
}
|
|
} |