JQuery包装器提供了大量的方法,可以再页面中直接使用。但是,没有任何一个库可以满足所有的需求,所以,JQuery库提供了丰富的扩展功能。以禁用一组表单元素为例,看看怎么简单有效的在JQuery库中添加自定义的功能扩展。(JQuery没有禁用表单元素的方法哦)
上代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE> <html lang= "en" > <head> <title>Custom Method!</title> <meta http-equiv= "content-type" content= "text/html;charset=utf-8" > <script type= "text/javascript" src= "js/jquery-2.1.1.js" ></script> <script type= "text/javascript" > jQuery( function () { $( "form input" ).disable(); }); </script> </head> <body> <p>测试自定义方法禁用表单元素</p> <form> <input type= "text" value= "test" ><br/> <input type= "button" value= "confirm" class= "test" > </form> </body> </html> |
文本框和按钮已经被禁用:
若只禁用按钮,添加一个css类即可;
1
2
3
4
|
jQuery( function () { $( "form input.test" ).disable(); }); |
看看是不是禁用了按钮:
实现也很简单,打开jquery-2.1.1.js源码,没有压缩的,比较容易,我引入
的是jquery-2.1.1.js,然后添加下列代码
1
2
3
4
5
6
7
8
9
10
11
|
jQuery.fn.disable= function () { return this .each( function () { if ( this .disabled != null ) this .disabled= true ; }); } |
在按照上述案例的方式调用即可。
在《JQuery In Action》一书中,提到以$.fn.方法名方式扩展(P12),我测试过,没有实现禁用。错误之处,还望指正。