Leeo本人一直很喜欢jQuery这个优秀的js框架。刚刚在Google搜索jqGrid结合Struts2使用的时候，无意中发现这这么一个插件“Struts2 jQuery Plugin”，貌似很不错，以后有空要研究研究，这里暂时做个记录，方便日后查阅。
项目地址：http://code.google.com/p/struts2-jquery/
实例地址：http://www.weinfreund.de/struts2-jquery-showcase/index.action
<!-- jQuery的优秀使得基于jQuery的插件可谓百花齐放、争相斗艳（大家可以到官方网站插件页面了解详情）。 从今天起，Leeo会陆续为大家推荐一系列优秀的jQuery插件。 面对这琳琅满目的插件，也许你会觉得不知道该如何选择，希望Leeo的推荐能够给大家在选择插件是作为一个参考。 -->
今天为大家推荐的插件是jQuery Form Plugin，这是一个绝对称得上优秀的插件，正如作者自己说道：Submitting a form with AJAX doesn’t get any easier than this!（利用Ajax提交表单没有比使用这个插件更容易的了）。插件提供的主要方法有：
/* - ajaxForm - ajaxSubmit - formToArray - formSerialize - fieldSerialize - fieldValue - clearForm - clearFields - resetForm */
其中ajaxForm和ajaxSubmit是最主要的两个方法，这两个方法有如下区别：
/* ajaxForm和ajaxSubmit的区别： 1：ajaxSubmit提交表单，而ajaxForm没有 2：当调用ajaxSubmit立即序列化表单数据，并将其发送到服务器。 当调用ajaxForm它添加必要的事件监听器以便在用户提交表单的时候可以检测到，此时ajaxSubmit便会被调用。 当使用ajaxForm提交的数据将包括名称和提交元素的值（或其按坐标，如果提交的元素是一个图像）。 */
jQuery Form Plugin 官方API文档地址：http://www.malsup.com/jquery/form/#getting-started
附：中文API（如果你觉得看英文API比较累，那么你可以看下这里的中文API，但Leeo还是推荐你起码先看一遍英文的API，文档都比较通俗易懂，其实Leeo英文也实在不行，⊙﹏⊙b汗~~~）
/* 表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。 */ /*ajaxForm*/ /* 增加所有需要的事件监听器，为AJAX提交表单做 好准备。ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。 ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 可链接（Chainable）：可以。 实例：*/ $('#myFormId').ajaxForm(); /*ajaxSubmit 马上由AJAX来提交表单。 大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。 ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 可链接（Chainable）：可以。 实例：*/ // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false return false; }); /*formSerialize 将表单串行化（或序列化）成一个查询字符串。 这个方法将返回以下格式的字符串：name1=value1&name2=value2。 可链接（Chainable）：不能， 这个方法返回一个字符串。 实例：*/ var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); /*fieldSerialize 将表单的字段元素串行化（或序列化）成一个查询字符串。 当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 可链接（Chainable）：不能，这个方法返回一个字符串。 实例：*/ var queryString = $('#myFormId .specialFields').fieldSerialize(); /*fieldValue 返回匹配插入数组中的表单元素值。 从0.91版起，该方法将总是以数组的形式返回数据。 如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。 可链接（Chainable）：不能，该方法返回数组。 实例：*/ // 取得密码输入值 var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]); /*resetForm 通过调用表单元素原有的DOM方法，将表单恢复到初始状态。 可链接（Chainable）：可以。 实例：*/ $('#myFormId').resetForm(); /*clearForm 清除表单元素。 该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空， 清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。 可链接（Chainable）：可以。*/ $('#myFormId').clearForm(); /*clearFields 清除字段元素。 只有部分表单元素需要清除时才方便使用。 可链接（Chainable）：可以。*/ $('#myFormId .specialFields').clearFields(); /*Options对象 ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。 Options只是一个JavaScript对象，它包含了如下一些属性与值的集合： target 指明页面中由服务器响应进行更新的元素。 元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。 默认值：null。 url 指定提交表单数据的URL。 默认值：表单的action属性值 type 指定提交表单数据的方法（method）：“GET”或“POST”。 默认值：表单的method属性值（如果没有找到默认为“GET”）。 beforeSubmit 表单提交前被调用的回调函数。 “beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。 如果“beforeSubmit”回调函数返回false，那么表单将不被提交。 “beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据： [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值：null success 表单成功提交后调用的回调函数。 如果提供“success”回调函数，当从服务器返回响应后它被调用。 然后由dataType选项值决定传回responseText还是responseXML的值。 默认值：null dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。 dataType提供一种方法，它规定了怎样处理服务器的响应。 这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。 'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。 'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。 默认值：null（服务器返回responseText值） semantic Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image". 布尔标志，表示数据是否必须严格按照语义顺序（slower？）来进行提交。 注意： 一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了type="image"的input元素。 如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将semantic设置为true。 （译注：这一段由于无法理解，翻译出来可能语不达意，但请达人指正。） 默认值：false resetForm 布尔标志，表示如果表单提交成功是否进行重置。 Default value: null clearForm 布尔标志，表示如果表单提交成功是否清除表单数据。 默认值：null 实例：*/ // 准备好Options对象 var options = { target: '#divToUpdate', url: 'comment.php', success: function() { alert('Thanks for your comment!'); } }; // 将options传给ajaxForm $('#myForm').ajaxForm(options); /* 注意： Options对象还可以用来将值传递给jQuery的$.ajax方法。 如果你熟悉$.ajax所支持的options，你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。*/
1、Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
北瓜星级：★★★☆
推荐理由：兼容IE6、IE7、IE8、Firefox、Chrome、Safari等主流浏览器、使用简单、不依赖与其他框架、样式美观
存在不足：IE下select效果不起作用、只支持radio/checkbox/select
2、prettyCheckboxes, a solution to checkboxes
北瓜星级：★★★★☆
推荐理由：兼容IE6、IE7、IE8、Firefox、Chrome、Safari等主流浏览器、依赖于强大的jQuery、样式美观、有鼠标经过效果
存在不足：IE6、IE7鼠标经过无效果、只支持radio/checkbox
PS说明：与极其强大的prettyPhoto jQuery lightbox clone同于同一作者只手
实例演示：Demo
北瓜星级：★★★★☆
推荐理由：兼容IE7、IE8、Firefox、Chrome、Safari等主流浏览器、使用简单、不依赖与其他框架、样式美观、支持radio/checkbox/select/textarea/file/button/input
存在不足：不支持IE6、IE8下radio/checkbox文字有点偏位
实例演示：Demo
北瓜星级：★★★☆
推荐理由：兼容IE6、IE7、IE8、Firefox、Chrome、Safari等主流浏览器、使用简单、依赖于强大的jQuery、样式美观、支持radio/checkbox/select/textarea/button/input
存在不足：Chrome、Safari下textarea/button/input无效果
PS说明：这个是NiceForms的jQuery版、据说与BlockUI插件有冲突
实例演示：Demo
***************其他说明***************
虽然还见过不少其他表单美化插件，但有些leeo感觉做得还不是很好，这里只推荐了leeo觉得做得很不错的几个。如果你发现其他优秀的表单美化插件，请你留言推荐！
test 
