Content displayed when you click on the first tab.
Content displayed when you click on the second tab.
*/
var Tabs = new Class({
Implements: Options,
options: {
classPrefix: 'panel'
},
initialize: function(panels, options) {
this.setOptions(options);
if (panels.length <= 0) return false;
this.panels = panels;
this.panels.setStyle('display','none');
this.tabs = [];
this.panels.each(function(el,index) {
var tab = new Element('span',{
'class':this.options.classPrefix+'Tab',
'text':el.get('title'),
'events':{
'click':function(e){
e.stop();
this.activate(el,e.target);
}.bindWithEvent(this)
}
});
this.tabs.include(tab);
}.bind(this));
this.container = new Element('div',{
'class':this.options.classPrefix+'Container',
'styles':{
'overflow':'hidden',
'height':0
}
});
this.container.inject(this.panels[0],'before');
this.panels.each(function(el,index) {
this.container.adopt(el);
}.bind(this));
this.tabs.each(function(el,index){
el.inject(this.container,'before');
}.bind(this));
this.activate(this.panels[0],this.tabs[0])
},
activate: function(panel,tab){
this.panels.removeClass(this.options.classPrefix+'Active');
panel.addClass(this.options.classPrefix+'Active');
this.panels.setStyle('display','none');
panel.setStyle('display','block');
this.tabs.each(function(el,index){
el.removeClass(this.options.classPrefix+'Active');
}.bind(this));
tab.addClass(this.options.classPrefix+'Active');
this.container.tween('height',panel.getSize().y);
}
});
/* ---------------------------------------------------------------------------
CLASS: Validate(form, rules, [options]);
OPTIONS: validateOnBlur: validate each input as the user proceeds through the form (default:true)
selectors: css selectors for the inputs to validate within the form (default: 'input[type=text], input[type=password], select, textarea')
errorClass: css class assigned to the input when validation fails (default: 'error')
adviceClass: css class assigned to the display message when validation fails (default: 'advice')
waitingLabel: text assigned to the submit button after the user clicks 'submit' (default: 'Please wait...')
button: submit button element (default: null, but finds input[type=submit] within the submit method)
EVENTS: onFail: fires when an individual input fails validation
onSuccess: fires when an individual input passes validation
AUTHOR: Ryan J. Salva, ryan@capitolmedia.com
REVISED: September 25, 2009
*/
var Validate = new Class({
Implements: [Options,Events],
options: {
validateOnBlur: true,
selectors: 'input[type=text], input[type=password], input[type=checkbox], input[type=radio], input[type=password], select, textarea',
errorClass: 'error',
adviceClass: 'advice',
titleAdvice: true,
button: null,
waitingLabel: 'Please wait...',
onFail: $empty,
onSuccess: $empty
},
initialize: function(form, rules, options) {
this.setOptions(options);
this.form = $(form);
this.elements = this.form.getElements(this.options.selectors) // elements subject to validation;
this.rules = []; // rules for validation;
// implement pre-defined rules
this.standardRules.each(function(rule,index) {
this.addRule(rule);
}.bind(this));
// implement any new rules
if ($defined(rules)) {
rules.each(function(rule,index) {
this.addRule(rule);
}.bind(this));
}
if (this.options.titleAdvice) {
this.elements.each(function(el,index) {
if (el.get('title')) {
el.store('advice',el.get('title'));
el.removeAttribute('title');
}
});
}
// if specified, validate onblur
if(this.options.validateOnBlur) {
this.elements.each(function(el,index){
el.addEvent('blur', this.validate.bind(this, el));
}.bind(this));
}
// validate the form onsubmit
this.form.addEvent('submit', function(e) {
return this.submit();
}.bindWithEvent(this));
},
addRule: function(rule) {
this.rules.push(rule);
},
addRules: function(rules) {
rules.each(function(rule,index) {
this.addRule(rule);
}.bind(this));
},
submit: function() {
if(this.validateAll()) {
var button = (this.options.button)?this.options.button:this.form.getElement('input[type=submit]');
if (button) {
switch (button.get('tag')) {
case 'input':
button.value = this.options.waitingLabel;
button.disabled = true;
default:
button.set('text',this.options.waitingLabel);
}
}
return true;
} else {
this.fireEvent('onFail');
return false;
}
},
validate: function(el){
var ok = true;
this.rules.each(function(rule,index) {
if (el.hasClass(rule.className)) {
if (rule.test(el)) {
this.fireEvent('onSuccess');
} else {
this.fireEvent('onFail');
this.showAdvice(el,rule.advice);
ok = false;
}
}
}.bind(this));
if (ok) this.clearAdvice(el);
return ok;
},
validateAll: function() {
var ok = true;
this.elements.each(function(el,index){
if(!this.validate(el)) {
ok = (ok)?false:ok;
}
}.bind(this));
return ok;
},
showAdvice: function(el, advice){
advice = (el.retrieve('advice'))?el.retrieve('advice'):advice;
if (el.retrieve('adviceGroup')) el = el.retrieve('adviceGroup');
if(el.error == undefined) {
el.error = new Element('div',{
'class':this.options.adviceClass,
'styles':{
opacity: 0
},
'text':advice
});
if (el.retrieve('adviceElement')) {
el.error.inject(el.retrieve('adviceElement'));
} else {
var pos = el.getPosition(el.getOffsetParent());
var width = el.getWidth();
el.error.setStyles({
position: 'absolute',
left: pos.x + width,
top: pos.y
});
el.error.inject(el.getParent(),'inside');
}
el.error.tween('opacity',1);
} else {
el.error.set('text',advice);
}
el.addClass(this.options.errorClass);
},
clearAdvice: function(el){
el.removeClass(this.options.errorClass);
if(el.error != undefined){
el.error.destroy();
el.error = undefined;
}
},
standardRules: [
// required field; supports input[type=text], textarea, checkbox, radio and select
{
'className':'required',
'test':function(el) {
switch (el.type) {
case 'checkbox':
case 'radio':
var options = $$('input[name='+el.name+']');
var ok = false;
options.each(function(o){
if (o.checked) ok = true;
});
if (!ok) return false;
break;
default:
if (el.get('tag') == 'select' && el.selectedIndex <= 0) return false;
if (el.value == '') return false;
break;
}
return true;
},
'advice':'Required field'
},
// value (if any) must be an integer, i.e. positive whole number
{
'className':'integer',
'test':function(el) {
if (el.value != '') {
if (isNaN(el.value)) {
el.value = '';
return false;
}
}
return true;
},
'advice':'This field must be a number'
},
// value (if any) must be in the format name@domain.ext
{
'className':'email',
'test':function(el) {
if (el.value != '') {
var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/;
if (!el.value.toUpperCase().match(regEmail)) return false;
}
return true;
},
'advice':'Please enter a valid email address'
},
// checkbox must be checked regardless of other checkboxes in the same group
{
'className':'checked',
'test':function(el) {
if(!el.checked) return false;
return true;
},
'advice':'You must check the box to continue'
},
// value (if any) must match the value of another element or character string
{
'className':'match',
'test':function(el) {
var target = el.retrieve('match');
var str = ($type(target) == 'element')?target.value:target;
if(el.value != str) return false;
return true;
},
'advice':'Does not match'
}
]
});
/* ---------------------------------------------------------------------------
CLASS: Fader(container,[pause,duration,loop])
AUTHOR: Ryan J. Salva
MODIFIED: December 22, 2007
creates a single, rotating image on a page
IMPLEMENTATION:
