jquery checkbox 选中及取消选中

之前一直用$("checkbox").attr("checked", true) $("checkbox").attr("checked", true) 来实现选中及取消  最近突然发现$("checkbox").attr("checked", false) 突然不能用了  使用了很多方法都无法取消选中 .看了下jquery版本是2.1  怀疑是版本问题  查找资料 发现可以用prop解决. 以下内容来自于 http://hxq0506.iteye.com/blog/1046334 最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法,单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。 下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法: 1、从1.5.2升级到1.6.1 通过介绍新方法.prop()以及.attr()方法的改变,jQuery1.6.1引起了一场关于attributes和properties之间有何区别和联系的激烈讨论。同时,1.6.1也解决了一些向后兼容性问题。当从1.5.2升级到1.6.1时,你不必修改任何attribute代码。 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用。然而,正如前面所述,jQuery1.6.1允许你使用.attr()方法就像以前它被使用在所有的情况中一样。 2、发生了什么变化 Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。 特别提到的是,boolean attributes,比如:checked,selected,readonly和disabled在1.6.1中和1.6之前的处理相同。这意味着下面的代码:
$(“:checkbox”).attr(“checked”, true);
$(“option”).attr(“selected”, true);
$(“input”).attr(“readonly”, true);
$(“input”).attr(“disabled”, true);
甚至是这样的代码:
if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }
在1.6.1中没有必要为了保持之前期望的运行结果而发生任何改变。 为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替: 1c60909d-26f4-313b-85b9-5e39c480eeff 首先,window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop,而不是抛出一个错误。 其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上,一个attribute就是以下html中你看到的: <input type="checkbox;" checked="checked" /> boolean attributes,比如:checked,仅被设置成默认值或初始值。在一个checkbox的元素中,checked attributes在页面加载的时候就被设置,而不管checkbox元素是否被选中。 properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。
$(“:checkbox”).get(0).checked = true;  
// Is the same as $(":checkbox:first").prop(“checked”, true);
在jQuery1.6中,如果使用下面的方法设置checked:
$(“:checkbox”).attr(“checked”, true);
将不会检查checkbox元素,因为它是需要被设置的property,但是你所有的设置都是初始值。 然而,曾经jQuery1.6被释放出来的时候,jQuery团队明白当浏览器仅关心页面加载时,设置一些值不是特别的有用。所以,为了保持向后兼容性和.attr()方法的有用性,我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。 最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表:
autofocus, autoplay, async, checked, controls, defer, disabled,  
hidden, loop, multiple, open, readonly, required, scoped, selected
译者注:大部分都是html5新增的属性) 还是建议使用.prop()方法来设置这些boolean attributes/properties,即使这些用例没有转换成使用.prop()方法,但是你的代码仍然可以在jQuery1.6.1中正常运行。 下面是一些attributes和properties的列表,正常情况下,应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法,但是.attr()方法可以运行在所有的attributes情况下。 注意:一些DOM元素的properties也被列在下面,但是仅运行在新的.prop()方法中 bf5b6182-ffc7-3e30-a159-75ac8980fd1f *例如:window.location **如果需要在(if needed over).width().attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行,就像1.6之前做的那样) 3、首选用法的概述 .prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

Jquery form 插件

表单插件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。 ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、method,最好在表单中提供submit按钮)它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个的以JavaScript的方式获取每个表单属性的值,并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的JavaScript代码 $(document).ready(function(){ registerForm'表单id data回调数据 $('#registerForm').ajaxForm(function(data){ alert(data);//弹出ajax请求后的回调结果 }); }); ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。 $(document).ready(function(){ $('#btn').click(function(){ $('#registerForm').ajaxSubmit(function(data){ alert(data); }); return false; }); }); 该段代码作用是在表单中id为btn的按钮click事件触发时通过ajaxSubmit()方法以ajax技术提交表单到表单的action所指路径 formSerialize()是将一个form中所有的表单元素以name作为key,value作为值进行序列化操作,这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值,最好也设置id方便jquery定位表单元素。若要使用此方法你必须设置表单元素name属性及填充表单元素value的值,我在初次使用时就忘了设置name属性,最后在同事的帮助下找了好久才发现此错误。 var str=$('#registerForm').formSerialize(); // registerForm为form id alert(str); fieldSerialize()是将form中表单元素进行序列化以name作为key,value作为值进行序列化操作,这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值。 var str=$('#username). fieldSerialize(); alert(str);

jQuery Validation Plugin

一、默认校验规则

(1)required:true                必输字段 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值 (3)email:true                    必须输入正确格式的电子邮件 (4)url:true                        必须输入正确格式的网址 (5)date:true                      必须输入正确格式的日期 日期校验ie6出错,慎用 (6)dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性 (7)number:true                 必须输入合法的数字(负数,小数) (8)digits:true                    必须输入整数 (9)creditcard:                   必须输入合法的信用卡号 (10)equalTo:"#field"          输入值必须和#field相同 (11)accept:                       输入拥有合法后缀名的字符串(上传文件的后缀) (12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10              输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10]      输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10]               输入值必须介于 5 和 10 之间 (16)max:5                        输入值不能大于5 (17)min:10                       输入值不能小于10  

二、修改默认的提示

[objc][/objc] view plaincopy
  1. jQuery.extend(jQuery.validator.messages, {
  2.     required: "必选字段",
  3.     remote: "请修正该字段",
  4.     email: "请输入正确格式的电子邮件",
  5.     url: "请输入合法的网址",
  6.     date: "请输入合法的日期",
  7.     dateISO: "请输入合法的日期 (ISO).",
  8.     number: "请输入合法的数字",
  9.     digits: "只能输入整数",
  10.     creditcard: "请输入合法的信用卡号",
  11.     equalTo: "请再次输入相同的值",
  12.     accept: "请输入拥有合法后缀名的字符串",
  13.     maxlength: jQuery.validator.format("请输入一个 长度最多是 {0}的字符串"),
  14.     minlength: jQuery.validator.format("请输入一个 长度最少是 {0}的字符串"),
  15.     rangelength: jQuery.validator.format("请输入 一个长度介于 {0}和 {1}之间的字符串"),
  16.     range: jQuery.validator.format("请输入一个介于 {0}和 {1}之间的值"),
  17.     max: jQuery.validator.format("请输入一个最大为{0}的值"),
  18.     min: jQuery.validator.format("请输入一个最小为{0}的值")
  19. });
上述代码存至message_cn.js中并添加引用即可  

三、常用的方法

1.用其他方式替代默认的SUBMIT
[javascript][/javascript] view plaincopy
  1. $().ready(function(){
  2.     $("#signupForm").validate({
  3.         submitHandler: function(form){
  4.             alert("submitted");
  5.             form.submit();
  6.         }
  7.     });
  8. });
使用ajax方式
[javascript][/javascript] view plaincopy
  1. $(".selector").validate({
  2.     submitHandler: function(form){
  3.         $(form).ajaxSubmit();
  4.     }
  5. })
可以设置validate的默认值,写法如下:
[javascript][/javascript] view plaincopy
  1. $.validator.setDefaults({
  2.     submitHandler: function(form){
  3.         alert("submitted!");
  4.         form.submit();
  5.     }
  6. });
如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()   2.debug,只验证不提交表单 如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
[javascript][/javascript] view plaincopy
  1. $().ready(function(){
  2.     $("#signupForm").validate({
  3.         debug: true
  4.     });
  5. });
如果一个页面中有多个表单都想设置成为debug,用
[javascript][/javascript] view plaincopy
  1. $.validator.setDefaults({
  2.     debug: true
  3. })
  3.ignore:忽略某些元素不验证
[javascript][/javascript] view plaincopy
  1. ignore: ".ignore"
4.更改错误信息显示的位置 errorPlacement:Callback Default: 把错误信息放在验证的元素后面 指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
[javascript][/javascript] view plaincopy
  1. errorPlacement: function(error, element){
  2.     error.appendTo(element.parent());
  3. }
errorClass:String  Default: "error" 指定错误提示的css类名,可以自定义错误提示的样式 errorElement:String  Default: "label" 用什么标签标记错误,默认的是label你可以改成em errorContainer:Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer:Selector 把错误信息统一放在一个容器里面。 wrapper:String 用什么标签再把上边的errorELement包起来 一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏 errorContainer: "div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li"

官方demo

  5.更改错误信息显示的样式 设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式
[css][/css] view plaincopy
  1. input.error {
  2.     border: 1px solid red;
  3. }
  4. label.error {
  5.     background: url("./demo/images/unchecked.gif") no-repeat 0px 0px;
  6.     padding-left: 16px;
  7.     padding-bottom: 2px;
  8.     font-weight: bold;
  9.     color: #EA5200;
  10. }
  11. label.checked {
  12.     background: url("./demo/images/checked.gif") no-repeat 0px 0px;
  13. }
  6.每个字段验证通过执行函数success:String,Callback 要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
[javascript][/javascript] view plaincopy
  1. success: function(label){
  2.     // set   as text for IE
  3.     label.html(" ").addClass("checked");
  4.     //label.addClass("valid").text("Ok!")
  5. }
添加"valid" 到验证元素, 在CSS中定义的样式<style>label.valid {}</style> success: "valid" 7.验证的触发方式修改 下面的虽然是boolean型的,但建议除非要改为false,否则别乱添加。 onsubmit:Boolean  Default: true 提交时验证. 设置唯false就用其他方法去验证 onfocusout:Boolean  Default: true 失去焦点是验证(不包括checkboxes/radio buttons) onkeyup:Boolean  Default: true 在keyup时验证. onclick:Boolean  Default: true 在checkboxes 和 radio 点击时验证 focusInvalid:Boolean  Default: true 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 focusCleanup:Boolean  Default: false 如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用
[javascript][/javascript] view plaincopy
  1. // 清除表单的错误验证信息
  2. $().ready(function(){
  3.     var validator = $("#signupForm").validate({
  4.         submitHandler: function(form){
  5.             alert("submitted");
  6.             form.submit();
  7.         }
  8.     });
  9.     $("#reset").click(function(){
  10.         validator.resetForm();
  11.     });
  12. });
  8.异步验证 remote:URL 使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
[javascript][/javascript] view plaincopy
  1. remote: "check-email.php"
  2. //服务器端会默认接受name和value
  3. remote: {
  4.     url: "check-email.php",     //后台处理程序
  5.     type: "post",               //数据发送方式
  6.     dataType: "json",           //接受数据格式
  7.     data: {                     //要传递的数据
  8.         username: function() {
  9.             return $("#username").val();//必须写成函数形式,否则取不到最新的值
  10.         }
  11.     }
  12. }
远程地址只能输出 "true" 或 "false",不能有其它输出   9.添加自定义校验 addMethod:name, method, message 自定义验证方法
[javascript][/javascript] view plaincopy
  1. // 中文字两个字节
  2. jQuery.validator.addMethod("byteRangeLength", function(value, element, param){
  3.     var length = value.length;
  4.     for (var i = 0; i < value.length; i++) {
  5.         if (value.charCodeAt(i) > 127) {
  6.             length++;
  7.         }
  8.     }
  9.     return this.optional(element) || (length >= param[0] && length <= param[1]);
  10. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
  11. // 邮政编码验证
  12. jQuery.validator.addMethod("isZipCode", function(value, element){
  13.     var tel = /^[0-9]{6}$/;
  14.     return this.optional(element) || (tel.test(value));
  15. }, "请正确填写您的邮政编码");
1.要在additional-methods.js文件中添加或者在jquery.validate.js添加建议一般写在additional-methods.js文件中 2.在messages_cn.js文件添加:isZipCode: "只能包括中文字、英文字母、数字和下划线", 调用前要添加对additional-methods.js文件的引用。   10.动态修改验证规则  
[javascript][/javascript] view plaincopy
  1. $("#myinput").rules("add", {
  2.     minlength: 2
  3. });
  4. $("#myinput").rules("add", {
  5.     required: true,
  6.     minlength: 2,
  7.     messages: {
  8.         required: "Required input",
  9.         minlength: jQuery.format("Please, at least {0} characters are necessary")
  10.     }
  11. });
  12. $("#myinput").rules("remove");
  13. $("#myinput").rules("remove", "min max");

四、API文档

名称

返回类型

描述

validate(options)

返回:Validator

验证所选的FORM

valid()

返回:Boolean

检查是否验证通过

rules()

返回:Options

返回元素的验证规则

rules("add",rules)

返回:Options

增加验证规则

rules("remove",rules)

返回:Options

删除验证规则

removeAttrs(attributes)

返回:Options

删除特殊属性并且返回他们

Custom selectors

:blank

返回:Validator

没有值的筛选器

:filled

返回:Array <Element >

有值的筛选器

:unchecked

返回:Array <Element >

没选择的元素的筛选器

Utilities

jQuery.format

(template,argument ,argumentN...)

返回:String

用参数代替模板中的 {n}

 

 

Validator:

validate方法返回一个Validator对象,它有很多方法,让你能使用引发校验程序或者改变form的内容. validator对象有很多方法,但下面只是列出常用的

form()

返回:Boolean

验证form返回成功还是失败

element(element)

返回:Boolean

验证单个元素是成功还是失败

resetForm()

返回:undefined

把前面验证的FORM恢复到验证前原来的状态

showErrors(errors)

返回:undefined

显示特定的错误信息

Validator functions:

setDefaults(defaults)

返回:undefined

改变默认的设置

addMethod(name,method,message)

返回:undefined

添加一个新的验证方法.必须包括一个独一无二的名字,一个JAVASCRIPT的方法和一个默认的信息

addClassRules(name,rules)

返回:undefined

增加组合验证类型 在一个类里面用多种验证方法里比较有用

addClassRules(rules)

返回:undefined

增加组合验证类型 在一个类里面用多种验证方法里比较有用,这个是一下子加多个

 

 

内置验证方式:

required()

返回:Boolean

必填验证元素

required(dependency-expression)

返回:Boolean

必填元素依赖于表达式的结果

required(dependency-callback)

返回:Boolean

必填元素依赖于回调函数的结果

remote(url)

返回:Boolean

请求远程校验。url通常是一个远程调用方法

minlength(length)

返回:Boolean

设置最小长度

maxlength(length)

返回:Boolean

设置最大长度

rangelength(range)

返回:Boolean

设置一个长度范围[min,max]

min(value)

返回:Boolean

设置最大值

max(value)

返回:Boolean

设置最小值

email()

返回:Boolean

验证电子邮箱格式

range(range)

返回:Boolean

设置值的范围

url()

返回:Boolean

验证URL格式

date()

返回:Boolean

验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)

dateISO()

返回:Boolean

验证ISO类型的日期格式

dateDE()

返回:Boolean

验证德式的日期格式(29.04.1994 or 1.1.2006)

number()

返回:Boolean

验证十进制数字(包括小数的)

digits()

返回:Boolean

验证整数

creditcard()

返回:Boolean

验证信用卡号

accept(extension)

返回:Boolean

验证相同后缀名的字符串

equalTo(other)

返回:Boolean

验证两个输入框的内容是否相同

phoneUS()

返回:Boolean

验证美式的电话号码

 

 

validate ()的可选项:

debug:进行调试模式(表单不提交):

$(".selector").validate

({

  debug:true

})

把调试设置为默认:

$.validator.setDefaults({

  debug:true

})

submitHandler:

通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交

$(".selector").validate({

  submitHandler:function(form) {

$(form).ajaxSubmit();

  }

})

ignore:

对某些元素不进行验证

$("#myform").validate({

  ignore:".ignore"

})

rules:

自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象

$(".selector").validate({

  rules:{

    name:"required",

    email:{

      required:true,

      email:true

    }

  }

})

messages:

自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数

$(".selector").validate({

  rules:{

    name:"required",

    email:{

      required:true,

      email:true

    }

  },

  messages:{

    name:"Name不能为空",

    email:{

      required:"E-mail不能为空",

      email:"E-mail地址不正确"

    }

  }

})

groups:

对一组元素的验证,用一个错误提示,用error Placement控制把出错信息放在哪里

$("#myform").validate({

 groups:{

   username:"fname lname"

 },

 errorPlacement:function(error,element) {

    if (element.attr("name") == "fname" || element.attr("name") == "lname")

      error.insertAfter("#lastname");

    else

      error.insertAfter(element);

  },

  debug:true

})

Onubmit Boolean默认:true

是否提交时验证

$(".selector").validate({

  onsubmit:false

})

onfocusout Boolean默认:true

是否在获取焦点时验证

$(".selector").validate({

  onfocusout:false

})

onkeyup Boolean默认:true

是否在敲击键盘时验证

$(".selector").validate({

  onkeyup:false

})

onclick Boolean默认:true

是否在鼠标点击时验证(一般验证checkbox,radiobox)

$(".selector").validate({

  onclick:false

})

focusInvalid Boolean默认:true

提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点

$(".selector").validate({

  focusInvalid:false

})

focusCleanup Boolean默认:false

当未通过验证的元素获得焦点时,并移除错误提示(避免和 focusInvalid.一起使用)

$(".selector").validate({

  focusCleanup:true

})

errorClass String默认:"error"

指定错误提示的css类名,可以自定义错误提示的样式

$(".selector").validate({

  errorClass:"invalid"

})

errorElement String默认:"label"

使用什么标签标记错误

$(".selector").validate

  errorElement:"em"

})

wrapper String

使用什么标签再把上边的errorELement包起来

$(".selector").validate({

  wrapper:"li"

})

errorLabelContainer Selector

把错误信息统一放在一个容器里面

$("#myform").validate({

  errorLabelContainer:"#messageBox",

  wrapper:"li",

  submitHandler:function() { alert("Submitted!") }

})

showErrors:

跟一个函数,可以显示总共有多少个未通过验证的元素

$(".selector").validate({

  showErrors:function(errorMap,errorList) {

       $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");

       this.defaultShowErrors();

  }

})

errorPlacement:

跟一个函数,可以自定义错误放到哪里

$("#myform").validate({

 rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));

  },

  debug:true

})

success:

要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数

$("#myform").validate({

       success:"valid",

       submitHandler:function() { alert("Submitted!") }

})

highlight:

可以给未通过验证的元素加效果,闪烁等

 

 

addMethod(name,method,message)方法:

参数name是添加的方法的名字

参数method是一个函数,接收三个参数(value,element,param) value是元素的值,element是元素本身 param是参数,我们可以用addMethod来添加除built-in Validation methods之外的验证方法 比如有一个字段,只能输一个字母,范围是a-f,写法如下:

$.validator.addMethod("af",function(value,element,params){

  if(value.length>1){

   return false;

  }

  if(value>=params[0] && value<=params[1]){

   return true;

  }else{

   return false;

  }

},"必须是一个字母,且a-f");

用的时候,比如有个表单字段的id="username",则在rules中写

username:{

  af:["a","f"]

}

addMethod的第一个参数,就是添加的验证方法的名子,这时是af

addMethod的第三个参数,就是自定义的错误提示,这里的提示为:"必须是一个字母,且a-f"

addMethod的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法

如果只有一个参数,直接写,如果af:"a",那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开

 

meta String方式:

$("#myform").validate({

  meta:"validate",

  submitHandler:function() { alert("Submitted!") }

})

<script type="text/javascript" src="js/jquery.metadata.js"></script>

<script type="text/javascript" src="js/jquery.validate.js"></script>

<form id="myform">

 <input type="text" name="email" />

 <input type="submit" value="Submit" />

</form>

Bootstrap的一些笔记——form,button,etc.

所有标签都可以添加class="well"。用来增加默认样式(白色圆角的那个)。 <pre>标签不同于网格系统,是已经加入了可见样式的标签。可以结合google-code-prettify代码加亮。 相关地址:http://google-code-prettify.googlecode.com/svn/trunk/README.html <table>标签有以下几个标签组成:<thead><tbody><tr><th><td> 其中<thead>中应包含<tr><th></th></tr> 其中<tbody>中应包含<tr><td></td></tr> (因为th和td等等有各自的样式表) 同时,<table>表有可选class:table|table-bordered|table-striped|table-condensed 详细样式:http://twitter.github.com/bootstrap/base-css.html#tables <form>标签有一些属性:.form-vertical(默认,水平排列);.form-inline(横向);.form- search(说是为搜索优化,没感觉有啥效果,水平);.form-horizontal(这个才应该是水平水平,但是完全没效果— —|||..) 太多的东西懒得写了,用个例子概括吧:
[html][/html] view plaincopyprint?
  1. <div class="row">
  2.     <div class="span12">
  3.         <form class="form-horizontal">
  4.             <fieldset>
  5.                 <legend>Form test</legend>
  6.                 <div class="control-group">
  7.                     <label class="control-label">Field one:</label>
  8.                     <div class="controls">
  9.                         <input class="span6" type="text" placeholder=".span6">
  10.                     </div>
  11.                 </div>
  12.                 <div class="control-group">
  13.                     <label class="control-label">Field two:</label>
  14.                     <div class="input-prepend">
  15.                         <span class="add-on">www.</span>
  16.                         <input class="span6" type="text" placeholder="   .com">
  17.                     </div>
  18.                 </div>
  19.                 <div class="control-group">
  20.                     <label class="control-label">Field three:</label>
  21.                     <div class="input-append">
  22.                         <input class="span6" type="text" placeholder"www.   ">
  23.                         <span class="add-on">.com</span>
  24.                     </div>
  25.                     <p class="help-block">Help text can be written here</p>
  26.                 </div>
  27.                 <div class="form-actions">
  28.                     <button type="submit" class="btn btn-primary">Submit Button</button>
  29.                     <button type="reset" class="btn">Reset Button</button>
  30.                     <p class="help-block">That's all the example</p>
  31.                 </div>
  32.             </fieldset>
  33.         </form>
  34.     </div>
  35. </div>
按钮首先要有.btn属性才能显示出bootstrap的效果。 同时还可以附加属性:.btn-primary;.btn-info;.btn-success;.btn-warning;.btn-danger; 不多说,贴例子:
[html][/html] view plaincopyprint?
  1. <section id="showButton">
  2.     <div class="row show-grid">
  3.         <legend>Button show:</legend>
  4.             <div class="span2">
  5.                 <center>
  6.                     <button type="button" class="btn">Button(Normal)</button>
  7.                     <p class="help-block">.btn</p>
  8.                 </center>
  9.             </div>
  10.             <div class="span2">
  11.                 <center>
  12.                     <button type="button" class="btn btn-primary">Button(Primary)</button>
  13.                     <p class="help-block">.btn .btn-primary</p>
  14.                 </center>
  15.             </div>
  16.             <div class="span2">
  17.                 <center>
  18.                     <button type="button" class="btn btn-info">Button(Info)</button>
  19.                     <p class="help-block">.btn .btn-info</p>
  20.                 </center>
  21.             </div>
  22.             <div class="span2">
  23.                 <center>
  24.                     <button type="button" class="btn btn-success">Button(Success)</button>
  25.                     <p class="help-block">.btn .btn-success</p>
  26.                 </center>
  27.             </div>
  28.             <div class="span2">
  29.                 <center>
  30.                     <button type="button" class="btn btn-warning">Button(Warning)</button>
  31.                     <p class="help-block">.btn .btn-warning</p>
  32.                 </center>
  33.             </div>
  34.             <div class="span2">
  35.                 <center>
  36.                     <button type="button" class="btn btn-danger">Button(Danger)</button>
  37.                     <p class="help-block">.btn .btn-danger</p>
  38.                 </center>
  39.             </div>
  40.     </div>
  41. </section>
同时按钮还有尺寸属性,分别是btn-large和btn-small。 调用按钮不一定非要用<button/>在bootstrap中还可以通过<a/>强制调用,其他属性同button。 .disabled属性可以让按钮处于实效状态(灰选)。 bootstrap提供一堆icon,都是通过以icon-为前缀的属性调用的,调用方式例如:
[html][/html] view plaincopyprint?
  1. <i class="icon-search">
bootstrap提供的所有的icon如下:
[html][/html] view plaincopyprint?
  1. <i class="icon-glass"></i>
  2.  <i class="icon-music"></i>
  3.  <i class="icon-search"></i>
  4.  <i class="icon-envelope"></i>
  5.  <i class="icon-heart"></i>
  6.  <i class="icon-star"></i>
  7.  <i class="icon-star-empty"></i>
  8.  <i class="icon-user"></i>
  9.  <i class="icon-film"></i>
  10.  <i class="icon-th-large"></i>
  11.  <i class="icon-th"></i>
  12.  <i class="icon-th-list"></i>
  13.  <i class="icon-ok"></i>
  14.  <i class="icon-remove"></i>
  15.  <i class="icon-zoom-in"></i>
  16.  <i class="icon-zoom-out"></i>
  17.  <i class="icon-off"></i>
  18.  <i class="icon-signal"></i>
  19.  <i class="icon-cog"></i>
  20.  <i class="icon-trash"></i>
  21.  <i class="icon-home"></i>
  22.  <i class="icon-file"></i>
  23.  <i class="icon-time"></i>
  24.  <i class="icon-road"></i>
  25.  <i class="icon-download-alt"></i>
  26.  <i class="icon-download"></i>
  27.  <i class="icon-upload"></i>
  28.  <i class="icon-inbox"></i>
  29.  <i class="icon-play-circle"></i>
  30.  <i class="icon-repeat"></i>
  31.  <i class="icon-refresh"></i>
  32.  <i class="icon-list-alt"></i>
  33.  <i class="icon-lock"></i>
  34.  <i class="icon-flag"></i>
  35.  <i class="icon-headphones"></i>
  36.  <i class="icon-volume-off"></i>
  37.  <i class="icon-volume-down"></i>
  38.  <i class="icon-volume-up"></i>
  39.  <i class="icon-qrcode"></i>
  40.  <i class="icon-barcode"></i>
  41.  <i class="icon-tag"></i>
  42.  <i class="icon-tags"></i>
  43.  <i class="icon-book"></i>
  44.  <i class="icon-bookmark"></i>
  45.  <i class="icon-print"></i>
  46.  <i class="icon-camera"></i>
  47.  <i class="icon-font"></i>
  48.  <i class="icon-bold"></i>
  49.  <i class="icon-italic"></i>
  50.  <i class="icon-text-height"></i>
  51.  <i class="icon-text-width"></i>
  52.  <i class="icon-align-left"></i>
  53.  <i class="icon-align-center"></i>
  54.  <i class="icon-align-right"></i>
  55.  <i class="icon-align-justify"></i>
  56.  <i class="icon-list"></i>
  57.  <i class="icon-indent-left"></i>
  58.  <i class="icon-indent-right"></i>
  59.  <i class="icon-facetime-video"></i>
  60.  <i class="icon-picture"></i>
  61.  <i class="icon-pencil"></i>
  62.  <i class="icon-map-marker"></i>
  63.  <i class="icon-adjust"></i>
  64.  <i class="icon-tint"></i>
  65.  <i class="icon-edit"></i>
  66.  <i class="icon-share"></i>
  67.  <i class="icon-check"></i>
  68.  <i class="icon-move"></i>
  69.  <i class="icon-step-backward"></i>
  70.  <i class="icon-fast-backward"></i>
  71.  <i class="icon-backward"></i>
  72.  <i class="icon-play"></i>
  73.  <i class="icon-pause"></i>
  74.  <i class="icon-stop"></i>
  75.  <i class="icon-forward"></i>
  76.  <i class="icon-fast-forward"></i>
  77.  <i class="icon-step-forward"></i>
  78.  <i class="icon-eject"></i>
  79.  <i class="icon-chevron-left"></i>
  80.  <i class="icon-chevron-right"></i>
  81.  <i class="icon-plus-sign"></i>
  82.  <i class="icon-minus-sign"></i>
  83.  <i class="icon-remove-sign"></i>
  84.  <i class="icon-ok-sign"></i>
  85.  <i class="icon-question-sign"></i>
  86.  <i class="icon-info-sign"></i>
  87.  <i class="icon-screenshot"></i>
  88.  <i class="icon-remove-circle"></i>
  89.  <i class="icon-ok-circle"></i>
  90.  <i class="icon-ban-circle"></i>
  91.  <i class="icon-arrow-left"></i>
  92.  <i class="icon-arrow-right"></i>
  93.  <i class="icon-arrow-up"></i>
  94.  <i class="icon-arrow-down"></i>
  95.  <i class="icon-share-alt"></i>
  96.  <i class="icon-resize-full"></i>
  97.  <i class="icon-resize-small"></i>
  98.  <i class="icon-plus"></i>
  99.  <i class="icon-minus"></i>
  100.  <i class="icon-asterisk"></i>
  101.  <i class="icon-exclamation-sign"></i>
  102.  <i class="icon-gift"></i>
  103.  <i class="icon-leaf"></i>
  104.  <i class="icon-fire"></i>
  105.  <i class="icon-eye-open"></i>
  106.  <i class="icon-eye-close"></i>
  107.  <i class="icon-warning-sign"></i>
  108.  <i class="icon-plane"></i>
  109.  <i class="icon-calendar"></i>
  110.  <i class="icon-random"></i>
  111.  <i class="icon-comment"></i>
  112.  <i class="icon-magnet"></i>
  113.  <i class="icon-chevron-up"></i>
  114.  <i class="icon-chevron-down"></i>
  115.  <i class="icon-retweet"></i>
  116.  <i class="icon-shopping-cart"></i>
  117.  <i class="icon-folder-close"></i>
  118.  <i class="icon-folder-open"></i>
  119.  <i class="icon-resize-vertical"></i>
  120.  <i class="icon-resize-horizontal"></i>
我们甚至能够利用Button和Icon制作出有动态效果的Button-Group。例如
[html][/html] view plaincopyprint?
  1. <section>
  2.     <div class="row">
  3.         <div class="span12">
  4.             <div class="btn-group">
  5.                 <a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>
  6.                 <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  7.                 <ul class="dropdown-menu">
  8.                     <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  9.                     <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  10.                     <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  11.                     <li class="divider"></li>
  12.                     <li><a href="#"><i class="i"></i> Make admin</a></li>
  13.                 </ul>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </section>
或者是一个很炫的nav list
[html][/html] view plaincopyprint?
  1. <section>
  2.     <div class="row">
  3.         <div class="span12">
  4.             <div class="well" style="padding: 8px 0;">
  5.                 <ul class="nav nav-list">
  6.                     <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  7.                     <li><a href="#"><i class="icon-book"></i> Library</a></li>
  8.                     <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  9.                     <li><a href="#"><i class="i"></i> Misc</a></li>
  10.                 </ul>
  11.             </div>
  12.         </div>
  13.     </div>
  14. </section>
原文

jquery dataTable

  1. 分页
    1. bPaginite:true;是否启用分页功能
    2. sPaginationType:two_button  或者full_numbers 分页风格
    3. sFirst:告诉他第一页怎么写
    4. sLast:告诉他最后一页怎么写
    5. sNext:告诉他下一页怎么写
    6. sPrevious:告诉他上一页怎么写
  2. 语言
    1. "sInfo":"共_TOTAL_页 第_START_到_END_页",
    2. "sEmptyTable":"没有数据"
    3. "sInfoFiltered":"从_MAX_条记录中搜索",
    4. "sInfoPostFix": "      底边栏的静态信息",
    5. "sInfoThousands": "我靠",//格式化信息用的
    6. "sLengthMenu":"显示<select><option>20</option><option>40</option></select>条信息"
    7.   "sSearch":"搜索"
  3. 基本的命令
    1. aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式
    2. aaSortingFixed:锁定某一列的排序方式  用户不能改变
    3. iDisplayLength:规定每一页的显示数目
    4. aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]
    5. bAutoWidth:自动调整列宽
    6. bDestroy:好比重新部署
    7. bFilter:是否启用过滤器
    8. bInfo:是否启用底边信息栏
    9. bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
    10. bProcessing:表格在处理数据时是否要显示信息
    11. sProcessing:定义表格在处理数据时要显示的信息
    12. bScrollAutoCss:是否允许显示滚动条
    13. sScrollY:表格的高度 不够的话用滚动条
    14. bScrollCollapse:当设置sScrolly时  如果数据没那么高  表格是否自适应高度
    15. bScrollInfinite:允许无限滚动  和google的图片搜索功能一样  一滚到最后就自动刷新
    16. sScrollXInner:是个百分比 实际就是表格的宽度一样
    17. sScrollX:也是百分比  实际就是水平方向滚动条件
    18. bSort:是否启用排序功能
     
 
引入 使用
Javascript代码
<pre>
$(document).ready(function(){      $('#example').dataTable();  });    // 另一个例子  $(document).ready(function(){      $('#example').dataTable({          "bInfo": false      });  });
</pre>
要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理。 以下是在进行dataTable绑定处理时候可以附加的参数:
属性名称 取值范围 解释
bAutoWidth true or false, default true 是否自动计算表格各列宽度
bDeferRender true or false, default false 用于渲染的一个参数
bFilter true or false, default true 开关,是否启用客户端过滤功能
bInfo true or false, default true 开关,是否显示表格的一些信息
bJQueryUI true or false, default false 是否使用jquery ui themeroller的风格
bLengthChange true or false, default true 开关,是否显示一个每页长度的选择条(需要分页器支持)
bPaginate true or false, default true 开关,是否显示(使用)分页器
bProcessing true or false, defualt false 开关,以指定当正在处理数据的时候,是否显示“正在处理”这个提示信息
bScrollInfinite true or false, default false 开关,以指定是否无限滚动(与sScrollY配合使用),在大数据量的时候很有用。当这个标志为true的时候,分页器就默认关闭
bSort true or false, default true 开关,是否让各列具有按列排序功能
bSortClasses true or false, default true 开关,指定当当前列在排序时,是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3',打开后,在处理大数据时,性能有所损失
bStateSave true or false, default false 开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的
sScrollX 'disabled' or  '100%' 类似的字符串 是否开启水平滚动,以及指定滚动区域大小
sScrollY 'disabled' or '200px' 类似的字符串 是否开启垂直滚动,以及指定滚动区域大小
-- -- --
选项
aaSorting array array[int,string], 如[], [[0,'asc'], [0,'desc']] 指定按多列数据排序的依据
aaSortingFixed 同上 同上。唯一不同点是不能被用户的自定义配置冲突
aLengthMenu default [10, 25, 50, 100],可以为一维数组,也可为二维数组,比如:[[10, 25, 50, -1], [10, 25, 50, "All"]] 这个为选择每页的条目数,当使用一个二维数组时,二维层面只能有两个元素,第一个为显示每页条目数的选项,第二个是关于这些选项的解释
aoSearchCols default null, 类似:[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] 给每个列单独定义其初始化搜索列表特性(这一块还没搞懂)
asStripClasses default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] 指定要被应用到各行的class风格,会自动循环
bDestroy true or false, default false 用于当要在同一个元素上执行新的dataTable绑定时,将之前的那个数据对象清除掉,换以新的对象设置
bRetrieve true or false, default false 用于指明当执行dataTable绑定时,是否返回DataTable对象
bScrollCollapse true or false, default false 指定适当的时候缩起滚动视图
bSortCellsTop true or false, default false (未知的东东)
iCookieDuration 整数,默认7200,单位为秒 指定用于存储客户端信息到cookie中的时间长度,超过这个时间后,自动过期
iDeferLoading 整数,默认为null 延迟加载,它的参数为要加载条目的数目,通常与bServerSide,sAjaxSource等配合使用
iDisplayLength 整数,默认为10 用于指定一屏显示的条数,需开启分页器
iDisplayStart 整数,默认为0 用于指定从哪一条数据开始显示到表格中去
iScrollLoadGap 整数,默认为100 用于指定当DataTable设置为滚动时,最多可以一屏显示多少条数据
oSearch 默认{ "sSearch": "", "bRegex": false, "bSmart": true } 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前
sAjaxDataProp 字符串,default 'aaData' 指定当从服务端获取表格数据时,数据项使用的名字
sAjaxSource URL字符串,default null 指定要从哪个URL获取数据
sCookiePrefix 字符串,default 'SpryMedia_DataTables_' 当打开状态存储特性后,用于指定存储在cookies中的字符串的前缀名字
sDom default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 这是用于定义DataTable布局的一个强大的属性,另开专门文档来补充说明吧
sPaginationType 'full_numbers' or 'two_button', default 'two_button' 用于指定分页器风格
sScrollXInner string default 'disabled' 又是水平滚动相关的,没搞懂啥意思
DataTable支持如下回调函数
回调函数名称 参数 返回值 默认 功能
fnCookieCallback 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set string: cookie formatted string (which should be encoded by using encodeURIComponent()) null 当每次cookies改变时,会触发这个函数调用
fnDrawCallback 在每次table被draw完后调用,至于做什么就看着办吧
fnFooterCallback 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次重画的时候修改表格的脚部
fnFormatNumber 1.int : number to be formatted String : formatted string for DataTables to show the number 有默认的 用于在大数字上,自动加入一些逗号,分隔开
fnHeaderCallback 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array 用于在每次draw发生时,修改table的header
fnInfoCallback 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules string: The string to be displayed in the information element. 用于传达table信息
fnInitComplete 1.object:oSettings - DataTables settings object 表格初始化完成后调用
fnPreDrawCallback 1.object:oSettings - DataTables settings object Boolean 用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它值,draw可以顺利执行
fnRowCallback 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) node : "TR" element for the current row 当创建了行,但还未绘制到屏幕上的时候调用,通常用于改变行的class风格
fnServerData 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. void $.getJSON 用于替换默认发到服务端的请求操作
fnStateLoadCallback 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. Boolean - false if the state should not be loaded, true otherwise 在cookies中的数据被加载前执行,可以方便地修改这些数据
fnStateSaveCallback 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. String - the full string that should be used to save the state 在状态数据被存储到cookies前执行,可以方便地做一些预操作

开发小技巧:jQuery处理自适应内容高度的iframe

前端开发中,我们往往需要处理iframe,可能有的时候希望iframe根据内容自适应高度以便不出现令人烦心的滚动条,下面这段代码可以帮助你实现类似功能。 [php] <pre>$(document).ready(function() { // Set specific variable to represent all iframe tags. var iFrames = document.getElementsByTagName('iframe'); // Resize heights. function iResize() { // Iterate through all iframes in the page. for (var i = 0, j = iFrames.length; i < j; i++) { // Set inline style to equal the body height of the iframed content. iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px'; } } // Check if browser is Safari or Opera. if ($.browser.safari || $.browser.opera) { // Start timer when loaded. $('iframe').load(function() { setTimeout(iResize, 0); } ); // Safari and Opera need a kick-start. for (var i = 0, j = iFrames.length; i < j; i++) { var iSource = iFrames[i].src; iFrames[i].src=""; iFrames[i].src = iSource; } } else { // For other good browsers. $('iframe').load(function() { // Set inline style to equal the body height of the iframed content. this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; } ); } } );</pre> [/php]