nicejforms.js

jquery form用法基于Ajax的表单

/**
 * @name NiceJForms
 * @description This a jQuery equivalent for Niceforms ( http://badboy.ro/articles/2007-01-30/niceforms/ ).  All the forms are styled with beautiful images as backgrounds and stuff. Enjoy them!
 * @param Hash hash A hash of parameters
 * @option integer selectRightSideWidth width of right side of the select
 * @option integer selectLeftSideWidth width of left side of the select 
 * @option integer selectAreaHeight
 * @option integer selectAreaOPtionsOverlap
 * @option imagesPath folder where custom form images are stored
 * @type jQuery
 * @cat Plugins/Interface/Forms
 * @author Lucian Lature ( [e-mail] )
 * @credits goes to Lucian Slatineanu ( http://www.badboy.ro )
 * @version 0.1
 */

jQuery.NiceJForms = {
	options : {
		selectRightSideWidth     : 21,
		selectLeftSideWidth      : 8,
		selectAreaHeight 	     : 21,
		selectAreaOptionsOverlap : 2,
		imagesPath               : "css/images/default/"
		// other options here
	},
	
	selectText     : 'please select',
	preloads       : new Array(),
	inputs         : new Array(),
	labels         : new Array(),
	textareas      : new Array(),
	selects        : new Array(),
	radios         : new Array(),
	checkboxes     : new Array(),
	texts          : new Array(),
	buttons        : new Array(),
	radioLabels    : new Array(),
	checkboxLabels : new Array(),
	hasImages      : true,
	
	keyPressed : function(event)
	{
		var pressedKey = event.charCode || event.keyCode || -1;
		
		switch (pressedKey)
		{
			case 40: //down
			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
			var linkNo = 0;
			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
			++linkNo;
			if(linkNo >= selects[fieldId].options.length) {linkNo = 0;}
			selectMe(selects[fieldId].id, linkNo, fieldId);
			break;
		
		case 38: //up
			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
			var linkNo = 0;
			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
			--linkNo;
			if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;}
			selectMe(selects[fieldId].id, linkNo, fieldId);
			break;
		default:
			break;
		}
	},
	
	build : function(options)
	{
		if (options)
			jQuery.extend(jQuery.NiceJForms.options, options);	
			
		if (window.event) {
			jQuery('body',document).bind('keyup', jQuery.NiceJForms.keyPressed);
		} else {
			jQuery(document).bind('keyup', jQuery.NiceJForms.keyPressed);
		}
		
		// test if images are disabled or not
		var testImg = document.createElement('img');
		$(testImg).attr("src", jQuery.NiceJForms.options.imagesPath + "blank.gif").attr("id", "imagineTest");
		jQuery('body').append(testImg);
		
		if(testImg.complete)
		{
			if(testImg.offsetWidth == '1') {jQuery.NiceJForms.hasImages = true;}
			else {jQuery.NiceJForms.hasImages = false;}
		}

		$(testImg).remove();
			
		if(jQuery.NiceJForms.hasImages)
		{
			$('form.niceform').each( function()
				{
					el 				= jQuery(this);
					jQuery.NiceJForms.preloadImages();
					jQuery.NiceJForms.getElements(el);
					jQuery.NiceJForms.replaceRadios();
					jQuery.NiceJForms.replaceCheckboxes();
					jQuery.NiceJForms.replaceSelects();
					
					if (!$.browser.safari) {
						jQuery.NiceJForms.replaceTexts();
						jQuery.NiceJForms.replaceTextareas();
						jQuery.NiceJForms.buttonHovers();
					}
				}
			);
		}	
	},
	
	preloadImages: function()
	{
		jQuery.NiceJForms.preloads = $.preloadImages(jQuery.NiceJForms.options.imagesPath + "button_left_xon.gif", jQuery.NiceJForms.options.imagesPath + "button_right_xon.gif", 
		jQuery.NiceJForms.options.imagesPath + "input_left_xon.gif", jQuery.NiceJForms.options.imagesPath + "input_right_xon.gif",
		jQuery.NiceJForms.options.imagesPath + "txtarea_bl_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_br_xon.gif", 
		jQuery.NiceJForms.options.imagesPath + "txtarea_cntr_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_l_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_tl_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_tr_xon.gif");
	},
	
	getElements: function(elm)
	{
		el = elm ? jQuery(elm) : jQuery(this);
		
		var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;
		
		jQuery.NiceJForms.inputs = $('input', el);
		jQuery.NiceJForms.labels = $('label', el);
		jQuery.NiceJForms.textareas = $('textarea', el);
		jQuery.NiceJForms.selects = $('select', el);
		jQuery.NiceJForms.radios = $('input[@type=radio]', el);
		jQuery.NiceJForms.checkboxes = $('input[@type=checkbox]', el);
		jQuery.NiceJForms.texts = $('input[@type=text]', el).add($('input[@type=password]', el));		
		jQuery.NiceJForms.buttons = $('input[@type=submit]', el).add($('input[@type=button]', el));
		
		jQuery.NiceJForms.labels.each(function(i){
			labelFor = $(jQuery.NiceJForms.labels[i]).attr("for");
			jQuery.NiceJForms.radios.each(function(q){
				if(labelFor == $(jQuery.NiceJForms.radios[q]).attr("id"))
				{
					if(jQuery.NiceJForms.radios[q].checked)
					{
						$(jQuery.NiceJForms.labels[i]).removeClass().addClass("chosen");	
					}
					
					jQuery.NiceJForms.radioLabels[rl] = jQuery.NiceJForms.labels[i];
					++rl;
				}
			})
			
			jQuery.NiceJForms.checkboxes.each(function(x){
				
				if(labelFor == $(this).attr("id"))
				{
					if(this.checked)
					{
						$(jQuery.NiceJForms.labels[i]).removeClass().addClass("chosen");	
					}
					jQuery.NiceJForms.checkboxLabels[cl] = jQuery.NiceJForms.labels[i];
					++cl;
				}
			})
		});
	},
	
	replaceRadios: function()
	{
		var self = this;
		
		jQuery.NiceJForms.radios.each(function(q){
		
			//alert(q);
			$(this).removeClass().addClass('outtaHere'); //.hide(); //.className = "outtaHere";
			
			
			
			var radioArea = document.createElement('div');
			//console.info($(radioArea));
			if(this.checked) {$(radioArea).removeClass().addClass("radioAreaChecked");} else {$(radioArea).removeClass().addClass("radioArea");};
			
			radioPos = jQuery.iUtil.getPosition(this);
			
			jQuery(radioArea)
				.attr({id: 'myRadio'+q})
				.css({left: radioPos.x + 'px', top: radioPos.y + 'px', margin : '1px'})
				.bind('click', {who: q}, function(e){self.rechangeRadios(e)})
				.insertBefore($(this));
			
			$(jQuery.NiceJForms.radioLabels[q]).bind('click', {who: q}, function(e){self.rechangeRadios(e)});
			
			if (!$.browser.msie) {
				$(this).bind('focus', function(){self.focusRadios(q)}).bind('blur', function() {self.blurRadios(q)});
			}
			
			$(this).bind('click', function(e){self.radioEvent(e)});
		});
		
		return true;
	},
	
	changeRadios: function(who) {
		
		var self = this;
		
		if(jQuery.NiceJForms.radios[who].checked) {
		
			jQuery.NiceJForms.radios.each(function(q){
				if($(this).attr("name") == $(jQuery.NiceJForms.radios[who]).attr("name"))
				{
					this.checked = false;
					$(jQuery.NiceJForms.radioLabels[q]).removeClass();	
				}
			});
			jQuery.NiceJForms.radios[who].checked = true;
			$(jQuery.NiceJForms.radioLabels[who]).addClass("chosen");
			
			self.checkRadios(who);
		}
	},
	
	rechangeRadios:function(e) 
	{
		who = e.data.who;
		
		if(!jQuery.NiceJForms.radios[who].checked) {
			for(var q = 0; q < jQuery.NiceJForms.radios.length; q++) 
			{
				if(jQuery.NiceJForms.radios[q].name == jQuery.NiceJForms.radios[who].name) 
				{
					jQuery.NiceJForms.radios[q].checked = false; 
					//console.info(q);
					jQuery.NiceJForms.radioLabels[q].className = "";
				}
			}
			$(jQuery.NiceJForms.radios[who]).attr('checked', true); 
			jQuery.NiceJForms.radioLabels[who].className = "chosen";
			jQuery.NiceJForms.checkRadios(who);
		}
	},
	
	checkRadios: function(who) {
		$('div').each(function(q){
			if($(this).is(".radioAreaChecked") && $(this).next().attr("name") == $(jQuery.NiceJForms.radios[who]).attr("name")) {$(this).removeClass().addClass("radioArea");}
		});
		$('#myRadio' + who).toggleClass("radioAreaChecked");
	},
	
	focusRadios: function(who) {
		$('#myRadio' + who).css({border: '1px dotted #333', margin: '0'}); return false;
	},
	
	blurRadios:function(who) {
		$('#myRadio' + who).css({border: 'none', margin: '1px'}); return false;
	},
	
	radioEvent: function(e) {
		var self = this;
		if (!e) var e = window.event;
		if(e.type == "click") {for (var q = 0; q < jQuery.NiceJForms.radios.length; q++) {if(this == jQuery.NiceJForms.radios[q]) {self.changeRadios(q); break;}}}
	},
	
replaceCheckboxes: function () 
	{
		var self = this;
		
		jQuery.NiceJForms.checkboxes.each(function(q){
			//move the checkboxes out of the way
			$(jQuery.NiceJForms.checkboxes[q]).removeClass().addClass('outtaHere');
			//create div
			var checkboxArea = document.createElement('div');
			
			//console.info($(radioArea));
			if(jQuery.NiceJForms.checkboxes[q].checked) {$(checkboxArea).removeClass().addClass("checkboxAreaChecked");} else {$(checkboxArea).removeClass().addClass("checkboxArea");};
			
			checkboxPos = jQuery.iUtil.getPosition(jQuery.NiceJForms.checkboxes[q]);
			
			jQuery(checkboxArea)
				.attr({id: 'myCheckbox' + q})
				.css({
				left: checkboxPos.x + 'px', 
				top: checkboxPos.y + 'px',
				margin : '1px'
			})
			.bind('click', {who: q}, function(e){self.rechangeCheckboxes(e)})
			.insertBefore($(jQuery.NiceJForms.checkboxes[q]));
			
			if(!$.browser.safari)
			{
				$(jQuery.NiceJForms.checkboxLabels[q]).bind('click', {who:q}, function(e){self.changeCheckboxes(e)})
			}
			else {
				$(jQuery.NiceJForms.checkboxLabels[q]).bind('click', {who:q}, function(e){self.rechangeCheckboxes(e)})
			}
			
			if(!$.browser.msie)
			{
				$(jQuery.NiceJForms.checkboxes[q]).bind('focus', {who:q}, function(e){self.focusCheckboxes(e)});
				$(jQuery.NiceJForms.checkboxes[q]).bind('blur', {who:q}, function(e){self.blurCheckboxes(e)});
			}	
			
			//$(jQuery.NiceJForms.checkboxes[q]).keydown(checkEvent);
		});
		return true;
	},

	rechangeCheckboxes: function(e)
	{
		who = e.data.who;
		var tester = false;