nicejforms-interface.js

jquery form用法基于Ajax的表单

				.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;
		
		if($(jQuery.NiceJForms.checkboxLabels[who]).is(".chosen")) {
			tester = false;
			$(jQuery.NiceJForms.checkboxLabels[who]).removeClass();
		}
		else if(jQuery.NiceJForms.checkboxLabels[who].className == "") {
			tester = true;
			$(jQuery.NiceJForms.checkboxLabels[who]).addClass("chosen");
		}
		jQuery.NiceJForms.checkboxes[who].checked = tester;
		jQuery.NiceJForms.checkCheckboxes(who, tester);
	},

	checkCheckboxes: function(who, action)
	{
		var what = $('#myCheckbox' + who);
		if(action == true) {$(what).removeClass().addClass("checkboxAreaChecked");}
		if(action == false) {$(what).removeClass().addClass("checkboxArea");}
	},

	focusCheckboxes: function(who) 
	{
		var what = $('#myCheckbox' + who);
		$(what).css(
					{
						border : "1px dotted #333", 
						margin : "0"
					});	
		return false;
	},

	changeCheckboxes: function(e) {
		who = e.data.who;
		//console.log('changeCheckboxes who is ' + who);
		if($(jQuery.NiceJForms.checkboxLabels[who]).is(".chosen")) {
			jQuery.NiceJForms.checkboxes[who].checked = true;
			$(jQuery.NiceJForms.checkboxLabels[who]).removeClass();
			jQuery.NiceJForms.checkCheckboxes(who, false);
		}
		else if(jQuery.NiceJForms.checkboxLabels[who].className == "") {
			jQuery.NiceJForms.checkboxes[who].checked = false;
			$(jQuery.NiceJForms.checkboxLabels[who]).toggleClass("chosen");
			jQuery.NiceJForms.checkCheckboxes(who, true);
		}
	},

	blurCheckboxes: function(who) 
	{
		var what = $('#myCheckbox' + who);
		$(what).css(
					{
						border : 'none', 
						margin : '1px'
					});	
		return false;
	},
	
	replaceSelects: function()
	{
		var self = this;
		
		jQuery.NiceJForms.selects.each(function(q){
			//create and build div structure
			var selectArea = document.createElement('div');
			var left = document.createElement('div');
			var right = document.createElement('div');
			var center = document.createElement('div');
			var button = document.createElement('a');
			var text = document.createTextNode(jQuery.NiceJForms.selectText);
			var selectWidth = parseInt(this.className.replace(/width_/g, ""));
			
			//console.log('selectWidth is ' + selectWidth);
			
			jQuery(center)
				.attr({id:'mySelectText'+q})
				.css({width: selectWidth - 10 + 'px'});
			jQuery(selectArea)
				.attr({id:'sarea'+q})
				.css({
					width: selectWidth + jQuery.NiceJForms.options.selectRightSideWidth + jQuery.NiceJForms.options.selectLeftSideWidth + 'px'
				})
				.addClass("selectArea");
				
			jQuery(button)
				.css({
				width      : selectWidth + jQuery.NiceJForms.options.selectRightSideWidth + jQuery.NiceJForms.options.selectLeftSideWidth + 'px',
				marginLeft : - selectWidth - jQuery.NiceJForms.options.selectLeftSideWidth + 'px',
				cursor: 'pointer'
				})
				.addClass("selectButton")
				.bind('click', {who:q}, function(e){self.showOptions(e)})
				.keydown(jQuery.NiceJForms.keyPressed);
			
			jQuery(left).addClass("left");	
			jQuery(right).addClass("right").append(button);	
			jQuery(center).addClass("center").append(text);	
			
			jQuery(selectArea).append(left).append(right).append(center).insertBefore(this);
			//hide the select field
			$(this).hide();
			//insert select div
			//build & place options div
			var optionsDiv = document.createElement('div');
			selectAreaPos = jQuery.iUtil.getPosition(selectArea);
			
			jQuery(optionsDiv)
				.attr({id:"optionsDiv" + q})
				.css({
					width : selectWidth + 1 + 'px', 
					left  : selectAreaPos.x + 'px', 
					top   : selectAreaPos.y + jQuery.NiceJForms.options.selectAreaHeight - jQuery.NiceJForms.options.selectAreaOptionsOverlap + 'px'
				})
				.addClass("optionsDivInvisible");
			
			//get select's options and add to options div
			$(jQuery.NiceJForms.selects[q]).children().each(function(w){
				var optionHolder = document.createElement('p');
				var optionLink = document.createElement('a');
				var optionTxt = document.createTextNode(jQuery.NiceJForms.selects[q].options[w].text);
				
				jQuery(optionLink)
					.attr({href:'#'})
					.css({cursor:'pointer'})
					.append(optionTxt)
					.bind('click', {who: q, id:jQuery.NiceJForms.selects[q].id, option:w, select:q}, function(e){self.showOptions(e);self.selectMe(jQuery.NiceJForms.selects[q].id, w, q)});
				
				jQuery(optionHolder).append(optionLink);
				jQuery(optionsDiv).append(optionHolder);//.append(optionLink);
				
				//check for pre-selected items
				if(jQuery.NiceJForms.selects[q].options[w].selected) {self.selectMe($(jQuery.NiceJForms.selects[q]).attr("id"), w, q);}
			});
			
			jQuery('body').append(optionsDiv);
		});
	},

	selectMe: function(selectFieldId, linkNo, selectNo) {
		selectField = $('#' + selectFieldId);
		sFoptions = selectField.children();
		
		selectField.children().each(function(k){
			//console.info(this);
			if(k == linkNo) {sFoptions[k].selected="selected";}
			else {sFoptions[k].selected = "";}
		});
		
		textVar = $("#mySelectText" + selectNo);
		var newText = document.createTextNode($(sFoptions[linkNo]).text());
		textVar.empty().append(newText);
	}, 

	showOptions: function(e) {
		var self = this;
		$("#optionsDiv"+e.data.who).toggleClass("optionsDivVisible").toggleClass("optionsDivInvisible").mouseout(function(e){self.hideOptions(e)});
	},
	
	hideOptions: function(e) {
		if (!e) var e = window.event;
		var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
		if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";};
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	},
	
	replaceTexts: function() {
		jQuery.NiceJForms.texts.each(function(q){
			$(jQuery.NiceJForms.texts[q]).css({width:this.size * 10 + 'px'});
			//console.info($(jQuery.NiceJForms.texts[q]));
			//felicia email
			var txtLeft = new Image();
			jQuery(txtLeft)
				.attr({src:jQuery.NiceJForms.options.imagesPath + "input_left.gif"})
				.addClass("inputCorner");
			
			var txtRight = new Image();
			jQuery(txtRight)
				.attr({src:jQuery.NiceJForms.options.imagesPath + "input_right.gif"})
				.addClass("inputCorner");
			
			$(jQuery.NiceJForms.texts[q]).before(txtLeft).after(txtRight).addClass("textinput");
			
			//create hovers
			$(jQuery.NiceJForms.texts[q]).focus(function(){$(this).addClass("textinputHovered");$(this).prev().attr('src', jQuery.NiceJForms.options.imagesPath + "input_left_xon.gif");$(this).next().attr('src', jQuery.NiceJForms.options.imagesPath + "input_right_xon.gif");});
			
			$(jQuery.NiceJForms.texts[q]).blur(function() {$(this).removeClass().addClass("textinput");$(this).prev().attr('src', jQuery.NiceJForms.options.imagesPath + "input_left.gif");$(this).next().attr('src', jQuery.NiceJForms.options.imagesPath + "input_right.gif");});
		});
	},
	
	replaceTextareas: function() {
		jQuery.NiceJForms.textareas.each(function(q){
			
			var where = $(this).parent();
			var where2 = $(this).prev();
			
			$(this).css({width: $(this).attr("cols") * 10 + 'px', height: $(this).attr("rows") * 10 + 'px'});
			//create divs
			var container = document.createElement('div');
			jQuery(container)
				.css({width: jQuery.NiceJForms.textareas[q].cols * 10 + 20 + 'px', height: jQuery.NiceJForms.textareas[q].rows * 10 + 20 + 'px'})
				.addClass("txtarea");
			
			var topRight = document.createElement('div');
			jQuery(topRight).addClass("tr");
			
			var topLeft = new Image();
			jQuery(topLeft).attr({src: jQuery.NiceJForms.options.imagesPath + 'txtarea_tl.gif'}).addClass("txt_corner");
			
			var centerRight = document.createElement('div');
			jQuery(centerRight).addClass("cntr");
			var centerLeft = document.createElement('div');
			jQuery(centerLeft).addClass("cntr_l");
			
			if(!$.browser.msie) {jQuery(centerLeft).height(jQuery.NiceJForms.textareas[q].rows * 10 + 10 + 'px')}
			else {jQuery(centerLeft).height(jQuery.NiceJForms.textareas[q].rows * 10 + 12 + 'px')};
			
			var bottomRight = document.createElement('div');
			jQuery(bottomRight).addClass("br");
			var bottomLeft = new Image();
			jQuery(bottomLeft).attr({src: jQuery.NiceJForms.options.imagesPath + 'txtarea_bl.gif'}).addClass('txt_corner');
			
			//assemble divs
			jQuery(topRight).append(topLeft);
			jQuery(centerRight).append(centerLeft).append(jQuery.NiceJForms.textareas[q]);
			jQuery(bottomRight).append(bottomLeft);
			jQuery(container).append(topRight).append(centerRight).append(bottomRight);
			
			jQuery(where2).before(container);
			
			//create hovers
			$(jQuery.NiceJForms.textareas[q]).focus(function(){$(this).prev().removeClass().addClass("cntr_l_xon"); $(this).parent().removeClass().addClass("cntr_xon"); $(this).parent().prev().removeClass().addClass("tr_xon"); $(this).parent().prev().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_tl_xon.gif"); $(this).parent().next().removeClass().addClass("br_xon"); $(this).parent().next().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_bl_xon.gif")});
			$(jQuery.NiceJForms.textareas[q]).blur(function(){$(this).prev().removeClass().addClass("cntr_l"); $(this).parent().removeClass().addClass("cntr"); $(this).parent().prev().removeClass().addClass("tr"); $(this).parent().prev().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_tl.gif"); $(this).parent().next().removeClass().addClass("br"); $(this).parent().next().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_bl.gif")});
		});
	},
	
	buttonHovers: function() {
		jQuery.NiceJForms.buttons.each(function(i){
			$(this).addClass("buttonSubmit");
			var buttonLeft = document.createElement('img');
			jQuery(buttonLeft).attr({src: jQuery.NiceJForms.options.imagesPath + "button_left.gif"}).addClass("buttonImg");
			
			$(this).before(buttonLeft);
			
			var buttonRight = document.createElement('img');
			jQuery(buttonRight).attr({src: jQuery.NiceJForms.options.imagesPath + "button_right.gif"}).addClass("buttonImg");
			
			if($(this).next()) {$(this).after(buttonRight)}
			else {$(this).parent().append(buttonRight)};
			
			$(this).hover(
				function(){$(this).attr("class", $(this).attr("class") + "Hovered"); $(this).prev().attr("src", jQuery.NiceJForms.options.imagesPath + "button_left_xon.gif"); $(this).next().attr("src", jQuery.NiceJForms.options.imagesPath + "button_right_xon.gif")},
				function(){$(this).attr("class", $(this).attr("class").replace(/Hovered/g, "")); $(this).prev().attr("src", jQuery.NiceJForms.options.imagesPath + "button_left.gif"); $(this).next().attr("src", jQuery.NiceJForms.options.imagesPath + "button_right.gif")}
			);
		});
	}
}