jqueryform表单的美化插件

最近做个项目感觉原始的表单样式比较单调，不够美观，然后再网上找了一下，有个jquery jqtransform插件，在项目运用中还是出现了比较多的问题，例如动态填充下拉列表不能用，然后自己写了一个，暴露出一下单击、change事件、取值函数等，尽量让后台人员可以独立运用。

效果图 ：

设计思想：

1、form表单的元素常用的有input、button、select、checkbox、radio

2、input、button、checkbox、radio分别在原本的基础上盖一个元素，采用相对的绝对定位

3、下拉列表：使用一个div模拟下拉列表框的选中值，用个ul来模拟下拉内容。当鼠标移上div时，显示下拉内容，鼠标移开时，隐藏ul下拉内容。

4、插件编写，暴露相关的单击事件，change事件，以及取值方法等

注：button的风格若不是一种，可在jqTransform中注释button美化方法。

引入文件：

<script type="text/javascript" src="jquery.js" >《script》<script type="text/javascript" src="jquery.jqtransform.js" >《script》

html代码

        
            文本框：         
         
            文本框：         
         
            按钮：        
        
            Checkbox:         
        
Radio :             oui            non        
        
Textarea : 
        
                    Select :                                            1                         2                             
		
			Select Redimentionne :							Big Option test line with more wordssssBig                 Option test line with more wordssss				Option 2				Option 3				Option 4				Option 5				Option 6				Option 7				Option 8					
		
			Select  :					
		
Submit button:

$(function(){		$("#testForm").jqTransform();	//美化所有的form表单元素				$("#testBtn").bind("click", function(){			//获取下拉列表的value和文本值									   			alert($("#select3").getSelectedValue()); //获取下拉列表select3选中value值			alert($("#select3").getSelecedtText()); //获取下拉列表select3选中文本值						//设置radio的默认值和获取选中的radio的值			$("[name=question]").jqTransRadio({defaultValue:"non"}); //设置radio的默认值			alert($("[name=question]:checked").val()); //获取选中的radio的值						//设置checkbox默认			$("[name=chbox]").prop("checked", true); 			$("[name=chbox]").jqTransCheckBox({defaultValue:true});						//获取checkbox的值和是否选中			alert($("[name=chbox]").val());			alert($("[name=chbox]").prop("checked"));		});				/**************************************************			根据后台返回数据动态填充下拉列表		**************************************************/		var data = [{"value":"1","text":"西溪园区一期"},					{"value":"4","text":"滨江二期"},					{"value":"5","text":"深圳项目"},					{"value":"1000005","text":"西溪二期项目"},					{"value":"6","text":"深圳项目1"},					{"value":"7","text":"西溪二期项目2"}];		$("#select3").jqTransDynamicSelect(data,{				 all:"全部",				 defaultValue:"4",				 onchange:function(curA){alert(curA.text());		}});				/**************************************************			事件		**************************************************/		//下拉列channge事件		$("#select2").jqTransSelectChange(function(selectedItem){			alert(selectedItem.text()); //获取单击的内容			alert(selectedItem.attr("option-value"));//获取单击下拉列表的value值												   		});		//checkbox的单击事件		$("[name=chbox]").jqTransCheckBoxClick(function(checkbox){				alert(checkbox.val()+"=="+checkbox.prop("checked"));		});		//radio的单击事件		$("[name=question]").jqTransRadioClick(function(curObj){			alert(curObj.val());		});			});