Initial checkin
This commit is contained in:
commit
d75eb444fc
4304 changed files with 369634 additions and 0 deletions
183
js/fancy-form/mootabs1.2.js
Normal file
183
js/fancy-form/mootabs1.2.js
Normal file
|
@ -0,0 +1,183 @@
|
|||
var mootabs = new Class({
|
||||
|
||||
initialize: function(element, options) {
|
||||
this.options = Object.extend({
|
||||
width: '300px',
|
||||
height: '200px',
|
||||
changeTransition: Fx.Transitions.Bounce.easeOut,
|
||||
duration: 1000,
|
||||
mouseOverClass: 'active',
|
||||
activateOnLoad: 'first',
|
||||
useAjax: false,
|
||||
ajaxUrl: '',
|
||||
ajaxOptions: {method:'get'},
|
||||
ajaxLoadingText: 'Loading...'
|
||||
}, options || {});
|
||||
|
||||
this.el = $(element);
|
||||
this.elid = element;
|
||||
|
||||
this.el.setStyles({
|
||||
height: this.options.height,
|
||||
width: this.options.width
|
||||
});
|
||||
|
||||
this.titles = $$('#' + this.elid + ' ul.mootabs_title li');
|
||||
this.panelHeight = this.el.getSize().size.y - (this.titles[0].getSize().size.y + 4);
|
||||
this.panels = $$('#' + this.elid + ' .mootabs_panel');
|
||||
|
||||
|
||||
this.panels.setStyle('height', this.panelHeight);
|
||||
|
||||
this.titles.each(function(item) {
|
||||
item.addEvent('click', function(){
|
||||
item.removeClass(this.options.mouseOverClass);
|
||||
this.activate(item);
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
item.addEvent('mouseover', function() {
|
||||
if(item != this.activeTitle)
|
||||
{
|
||||
item.addClass(this.options.mouseOverClass);
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
item.addEvent('mouseout', function() {
|
||||
if(item != this.activeTitle)
|
||||
{
|
||||
item.removeClass(this.options.mouseOverClass);
|
||||
}
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
|
||||
|
||||
if(this.options.activateOnLoad != 'none')
|
||||
{
|
||||
if(this.options.activateOnLoad == 'first')
|
||||
{
|
||||
this.activate(this.titles[0], true);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.activate(this.options.activateOnLoad, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
activate: function(tab, skipAnim){
|
||||
if(! $defined(skipAnim))
|
||||
{
|
||||
skipAnim = false;
|
||||
}
|
||||
if($type(tab) == 'string')
|
||||
{
|
||||
myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
|
||||
tab = myTab;
|
||||
}
|
||||
|
||||
if($type(tab) == 'element')
|
||||
{
|
||||
var newTab = tab.getProperty('title');
|
||||
this.panels.removeClass('active');
|
||||
|
||||
this.activePanel = this.panels.filterById(newTab)[0];
|
||||
|
||||
this.activePanel.addClass('active');
|
||||
|
||||
if(this.options.changeTransition != 'none' && skipAnim==false)
|
||||
{
|
||||
this.panels.filterById(newTab).setStyle('height', 0);
|
||||
var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: this.options.duration, transition: this.options.changeTransition});
|
||||
changeEffect.start({
|
||||
'0': {
|
||||
'height': [0, this.panelHeight]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.titles.removeClass('active');
|
||||
|
||||
tab.addClass('active');
|
||||
|
||||
this.activeTitle = tab;
|
||||
|
||||
if(this.options.useAjax)
|
||||
{
|
||||
this._getContent();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_getContent: function(){
|
||||
this.activePanel.setHTML(this.options.ajaxLoadingText);
|
||||
var newOptions = {update: this.activePanel.getProperty('id')};
|
||||
this.options.ajaxOptions = Object.extend(this.options.ajaxOptions, newOptions || {});
|
||||
var tabRequest = new Ajax(this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'), this.options.ajaxOptions);
|
||||
tabRequest.request();
|
||||
},
|
||||
|
||||
addTab: function(title, label, content){
|
||||
//the new title
|
||||
var newTitle = new Element('li', {
|
||||
'title': title
|
||||
});
|
||||
newTitle.appendText(label);
|
||||
this.titles.include(newTitle);
|
||||
$$('#' + this.elid + ' ul').adopt(newTitle);
|
||||
newTitle.addEvent('click', function() {
|
||||
this.activate(newTitle);
|
||||
}.bind(this));
|
||||
|
||||
newTitle.addEvent('mouseover', function() {
|
||||
if(newTitle != this.activeTitle)
|
||||
{
|
||||
newTitle.addClass(this.options.mouseOverClass);
|
||||
}
|
||||
}.bind(this));
|
||||
newTitle.addEvent('mouseout', function() {
|
||||
if(newTitle != this.activeTitle)
|
||||
{
|
||||
newTitle.removeClass(this.options.mouseOverClass);
|
||||
}
|
||||
}.bind(this));
|
||||
//the new panel
|
||||
var newPanel = new Element('div', {
|
||||
'style': {'height': this.options.panelHeight},
|
||||
'id': title,
|
||||
'class': 'mootabs_panel'
|
||||
});
|
||||
if(!this.options.useAjax)
|
||||
{
|
||||
newPanel.setHTML(content);
|
||||
}
|
||||
this.panels.include(newPanel);
|
||||
this.el.adopt(newPanel);
|
||||
},
|
||||
|
||||
removeTab: function(title){
|
||||
if(this.activeTitle.title == title)
|
||||
{
|
||||
this.activate(this.titles[0]);
|
||||
}
|
||||
$$('#' + this.elid + ' ul li').filterByAttribute('title', '=', title)[0].remove();
|
||||
|
||||
$$('#' + this.elid + ' .mootabs_panel').filterById(title)[0].remove();
|
||||
},
|
||||
|
||||
next: function(){
|
||||
var nextTab = this.activeTitle.getNext();
|
||||
if(!nextTab) {
|
||||
nextTab = this.titles[0];
|
||||
}
|
||||
this.activate(nextTab);
|
||||
},
|
||||
|
||||
previous: function(){
|
||||
var previousTab = this.activeTitle.getPrevious();
|
||||
if(!previousTab) {
|
||||
previousTab = this.titles[this.titles.length - 1];
|
||||
}
|
||||
this.activate(previousTab);
|
||||
}
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue