码迷,mamicode.com
首页 > Web开发 > 详细

自定义JQuery插件

时间:2017-08-19 19:58:23      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:权限   学习   方法   ide   对象   str   func   页面   需要   

           Jquery是个好东西,今天学习了怎么自定义Jquery插件,下面开始学习。

1.使用插件前的代码

  1. //(1)根据按钮添加分隔符
  2. /** 查询工具栏中table中的所有td,去掉第一个td与最后一个td */
  3. var table = $("#tb > table");
  4. var tds = table.find("td:not(:first,:last)");
  5. /** 判断td的个数 */
  6. if(tds.length > 0){
  7. /** 创建td添加到所有查询到得td前面(相邻元素) */
  8. $(‘<td><div class="dialog-tool-separator"></div></td>‘)
  9. .insertBefore(tds);
  10. }
  11. //(2)没有一个权限需要把工具栏中table隐藏
  12. if(table.find("td").length == 1){
  13. table.hide();
  14. }

2.自定义插件

   (1)  自定义插件的代码要满足下面的格式
  1. (function($){
  2. /**书写自定义的JQuery方法的位置*/
  3. })(jQuery);
  
  (2)  自定义JQuery对象的方法按照下面格式自定义即可.
            注意: 在该方法里面的this是指调用该方法的Jquery对象
  1. $.fn.自定义方法的名字 = function(){ 
  2. /** 逻辑代码 */ 
  3. }
 
  (3)  完成的代码
       代码:
  1. /**
  2. * jQuery工具插件
  3. */
  4. (function($){
  5. /**
  6. * 优化表格上面的工具栏插件
  7. * (1)根据按钮添加分隔符
  8. * (2)没有一个权限需要把工具栏中table隐藏
  9. */
  10. $.fn.formart4ToolBar = function(){
  11. /**
  12. * this:代表调用当前方法的JQuery对象 即$("#tb > table")
  13. */
  14. //(1)根据按钮添加分隔符
  15. /** 查询工具栏中table中的所有td,去掉第一个td与最后一个td */
  16. var tds = this.find("td:not(:first,:last)");
  17. /** 判断td的个数 */
  18. if(tds.length > 0){
  19. /** 创建td添加到所有查询到得td前面(相邻元素) */
  20. $(‘<td><div class="dialog-tool-separator"></div></td>‘)
  21. .insertBefore(tds);
  22. }
  23. //(2)没有一个权限需要把工具栏中table隐藏
  24. if(this.find("td").length == 1){
  25. this.hide();
  26. }
  27. };
  28. })(jQuery);
    
在页面中调用:  直接通过Jquery对象.方法名() 来调用    
  1. //调用自定义的插件来优化页面
  2. $("#tb > table").formart4ToolBar();


自定义JQuery插件

标签:权限   学习   方法   ide   对象   str   func   页面   需要   

原文地址:http://www.cnblogs.com/zeng1994/p/7397577.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!