• 编写基于jQuery的插件的方法


    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到

    1:添加全局类的方法

    常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法

    1     $.extend({
    2         add:function(a,b){return a+b;},
    3         minus:function(a,b){return a-b;}
    4     });
    5 
    6     var i= $.add(100,200);
    7     var j= $.minus(100,200);
    8     alert(i+'##'+j);

    第6行和第7行就可以使用该方法,对于js的全局静态公用方法,都可以这样写,将其他语言中的Global,Helper或者Utils等等文件中的方法,在js中可以用这种扩展jQuery的方法去做

    2:添加对象的方法

    下面要给按钮标签自定义一些方法,通过jQuery来调用(注意,按钮使用了bootstrap的样式,不过这对于下面的演示没有关系^_^)

    1 <div id="btn" class="btn btn-danger">
    2     按钮点击
    3 </div>

    下边给按钮自定义了一个初始化的方法,让按钮把传入的参数显示在content上,而且还自定义了一个press的回调事件的方法

     1   +function($){
     2         var parms={
     3             name:"pluign",
     4             version:"2.0"
     5         };
     6         var showDesc=function(obj){
     7             $(obj).text(JSON.stringify(parms));
     8         }
     9         $.fn.initButton=function(options){
    10             $.extend(parms,options);
    11             return this.each(function(){
    12                 showDesc(this);
    13                 $(this).on('click',function(){
    14                     parms.press.apply(this);
    15                 });
    16             });
    17         }
    18     }(jQuery);
    19     $('#btn').initButton({
    20         name:'hello world',
    21         sex :'Male',
    22         press:function(){
    23             alert('click button');
    24         }
    25     });

    第1行到18行是对jQuery的扩展,注意第一行的+号的写法,其实就是(function($){})(jQuery);
    博主是参照Bootstrap的源码的写法,至于为什么这样写,猜测估计是为了省一个括号“)”字符吧,呵呵

    方法中的showDesc将传入参数显示到按钮上

    具体效果如下:

    由此可见:传入的参数,都可以在jQuery扩展中拿到,这样就可以在自己的扩展插件中做任意想做的事情了。

  • 相关阅读:
    计算机图形学--贝塞尔曲线2
    计算机图形学--贝塞尔曲线1
    Windows编程1
    winform里面的Form1.Designer.cs
    mfc添加自定义事件
    怎么精确控制solidworks里面的表格的位置
    solidworks的工程图模板文件和图纸格式文件
    给datagridview的下拉框添加valueChange事件
    php开启短标签与<?xml version="1.0" encoding="UTF-8"?>冲突
    PHP分行打印数组-php输出数组方法大全
  • 原文地址:https://www.cnblogs.com/JimmyBright/p/5303081.html
Copyright © 2020-2023  润新知