JQ插件开发demo
前端笔记 2016-08-19 16:23:58 181 前端笔记   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

JQ插件开发demo(35)
还可以输入500
[̲̅V̲̅I̲̅P̅]☆冰★手☆
一直在用
@武 请问你是怎么解决 前台上传 数据内含有<br /> 且后台不显示图片列表 问题的
思念水的鱼
可以
@怀瑾握瑜 放投稿界面,提交后,就会自动清空,图片数据就没了。
你我之间
你好,我这里安装后无法删除,没有找到原因。后来在演示站中操作,可以删除,但是在提交文章保存后再次编辑,图片又回来了。
叶知秋
这个是一个很完美的插件,我的7.5版本,后台多图上传正常,前台上传时在每个图片 id结尾处增加了了个<br /> 比如: t0151a5b74b6a33b539.jpg::::::/e/extend/uploadImg/upload/upload_files/2020-03-05/e5fe70c408d42d5a005ac376a93f1357.jpg::::::14 <br />t0155b3a05e5bc3ba7f.jpg::::::/e/extend/uploadImg/upload/upload_files/2020-03-05/a3a084a722e40d497925f0ab19895106.jpg::::::15 <br />t0172891b82850db6d8.jpg::::::/e/extend/uploadImg/upload/upload_files/2020-03-05/8ad30835a792516601df5942721feb63.jpg::::::16 <br />,这样导致图片无法在编辑中显示!另外删除时数据库中删除了,但本地图片还在,希望作者有空改进下
怀瑾握瑜
升级到7.5,正常使用,需要注意图集字段建主表,且模型中要勾选,列表页也要勾选,不然无法删除,打记号。
怀瑾握瑜
支持图集模型吗?是不是就不用新建字段了?
@@ 没有使用内置的字段,不影响二次升级,建议新增字段使用
怀瑾握瑜
怎么增加排序?有的时候上传的图片比较乱,需要重新排序,是不是可以在前面加个序号?能修改的序号,方便后期的图片顺序修改。
@思念水的鱼 收到,将在下个版本升级
思念水的鱼
怎么增加排序?有的时候上传的图片比较乱,需要重新排序,是不是可以在前面加个序号?能修改的序号,方便后期的图片顺序修改。
Powered by yoyo苏ICP备15045725号