群组首页 → Web前端 → EXT → 论坛
发表回复

jQuery中实现自定义方法的扩展

agevs 2014-08-27

  JQuery包装器提供了大量的方法，可以再页面中直接使用。但是，没有

任何一个库可以满足所有的需求，所以，JQuery库提供了丰富的扩展功能

。以禁用一组表单元素为例，看看怎么简单有效的在JQuery库中添加自定

义的功能扩展。（JQuery没有禁用表单元素的方法哦）前端Ui资源

上代码：

 

[javascript] view plaincopy
 
  1.  1: <!DOCTYPE>  
  2.   
  3.  2: <html lang="en">  
  4.   
  5.  3: <head>  
  6.   
  7.  4:     <title>Custom Method!</title>  
  8.   
  9.  5:     <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  10.   
  11.  6:     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>  
  12.   
  13.  7:     <script type="text/javascript">  
  14.   
  15.  8:         jQuery(function()  
  16.   
  17.  9:             {  
  18.   
  19. 10:                 $("form input").disable();  
  20.   
  21. 11:             });  
  22.   
  23. 12:     </script>  
  24.   
  25. 13: </head>  
  26.   
  27. 14: <body>  
  28.   
  29. 15:     <p>测试自定义方法禁用表单元素</p>  
  30.   
  31. 16:     <form>  
  32.   
  33. 17:         <input type="text" value="test"><br/>  
  34.   
  35. 18:         <input type="button" value="confirm" class="test">  
  36.   
  37. 19:     </form>  
  38.   
  39. 20: </body>  
  40.   
  41. 21: </html>  

 

 

文本框和按钮已经被禁用：

前端Ui资源

1

若只禁用按钮，添加一个css类即可;

[javascript] view plaincopy
 
  1. 1: jQuery(function()  
  2.   
  3. 2:             {  
  4.   
  5. 3:                 $("form input.test").disable();  
  6.   
  7. 4:             });  

 

看看是不是禁用了按钮：

2

 

实现也很简单，打开jquery-2.1.1.js源码，没有压缩的，比较容易，我引入

的是jquery-2.1.1.js，然后添加下列代码

[javascript] view plaincopy
 
  1. 1: jQuery.fn.disable=function () {  
  2.   
  3. 2:         return this.each(function()  
  4.   
  5. 3:             {  
  6.   
  7. 4:                 if(this.disabled != null) this.disabled=true;  
  8.   
  9. 5:             });  
  10.   
  11. 6:     }  

 

在按照上述案例的方式调用即可。

前端Ui资源

 

在《JQuery In Action》一书中，提到以$.fn.方法名方式扩展（P12），我

测试过，没有实现禁用。错误之处，还望指正。
发表回复
Global site tag (gtag.js) - Google Analytics