JQ插件开发demo
前端笔记 2016-08-19 16:23:58 前端笔记   JS插件   

如果只封装一个方法的话，比如bootstrap的弹出层：

XML/HTML Code复制内容到剪贴板
  1. (function ($) {  
  2.   
  3.     $.fn.tooltip = function (options) {  
  4.   
  5.         //创建一些默认值，拓展任何被提供的选项  
  6.         var dft = {  
  7.             'title': '信息',  
  8.             'content': 'error!'  
  9.         };  
  10.         var ops = $.extend(dft,options);  
  11.   
  12.         $('#tips').on('show.bs.modal', function (event) {  
  13.               var modal = $(this)  
  14.               modal.find('.modal-title').text(ops.title)  
  15.               modal.find('.modal-body').html(ops.content);  
  16.         });  
  17.         $('#tips').modal('toggle');  
  18.     };  
  19. })(jQuery);  

 

调用方式：

JavaScript Code复制内容到剪贴板
  1. $("div").tooltip({    
  2.    title:'错误',    
  3.    content:'待解析的字符不能为空'    
  4. });    

 

 

 

如果该插件，有多个方法的话：执行方法的时候 后面有一个参数arguments，1表示不传递参数，0表示传递，如果要传参，改为0

JavaScript Code复制内容到剪贴板
  1. (function ($,window) {    
  2.     
  3.     var methods = {    
  4.         init: function (options) {    
  5.             $('#tips').modal('toggle');    
  6.         },    
  7.         show: function () {    
  8.             // is    
  9.         },    
  10.         hide: function () {    
  11.             // good    
  12.         },    
  13.         error: function (options) {    
  14.             var dft = {    
  15.                 'title': '信息',    
  16.                 'content': 'error!'    
  17.             };    
  18.             var ops = $.extend(dft,options);    
  19.     
  20.             $('#tips').on('show.bs.modal', function (event) {    
  21.                   var modal = $(this)    
  22.                   // var title = options.title ? options.title:'信息'    
  23.                   modal.find('.modal-title').text(ops.title)    
  24.                   modal.find('.modal-body').html(ops.content);    
  25.             });    
  26.             $('#tips').modal('toggle');    
  27.         }    
  28.     };    
  29.     
  30.     $.fn.tooltip = function (options) {    
  31.     
  32.         // 方法调用    
  33.         if (methods[options.method]) {    
  34.             return methods[options.method].apply(this, Array.prototype.slice.call(arguments, 0));    
  35.         } else if (typeof options.method === 'object' || !options.method) {    
  36.             return methods.init.apply(this, arguments);    
  37.         } else {    
  38.             return methods.error.apply(this, arguments);    
  39.             // $.error('Method' + options.method + 'does not exist on jQuery.tooltip');    
  40.         }    
  41.     };    
  42.     
  43. })(jQuery,window);    

 

 

调用方法：

JavaScript Code复制内容到剪贴板
  1. $("div").tooltip({    
  2.     method:'error',    
  3.     title:'错误',    
  4.     content:'待解析的字符不能为空'    
  5. });    

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/32.html

下载demo (0)
上一篇 JQuery实现的页面滚动时浮动窗口控件:ScrollFollow
下一篇 Web端触摸式导航菜单插件—Slideout.js
相关的文章
Powered by yoyo苏ICP备15045725号