编写基于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扩展中拿到,这样就可以在自己的扩展插件中做任意想做的事情了。

时间: 2024-10-23 01:28:20

编写基于jQuery的插件的方法的相关文章

基于JQuery.timer插件实现一个计时器

基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: <script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script> 然后是HTML,我们可以放一个hidden 的server control

基于jQuery幻灯片插件Slippry

分享一款基于jQuery幻灯片插件Slippry是一款基于Slippry.js插件实现的图片切换特效代码.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-content"> <ul id="thumbnails"> <li> <a href="#slide1"> <img src="img/image-1.jpg"

基于jQuery日期插件jalendar2

分享一款基于jQuery日期插件jalendar2.这是一款基于jalendar插件实现的日期时间选择代码.效果图如下: 在线预览   源码下载 html代码: <div id="yourId" class="jalendar"> <div class="added-event" data-date="19-11-2015" data-title="WWDC 13 on San Francisco,

给jQuery写插件的方法

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> div div{ border:#ccc solid 1px; margin-bottom:2px;} </style> <title>无标题文档</title>

基于jQuery幻灯片插件SkitterSlideshow

分享一款基于jQuery幻灯片插件SkitterSlideshow是一款支持38种不同的幻灯片过渡动画效果,以及两种不同类型的导航按钮,并且它提供了大量的配置参数用于控制幻灯片的显示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div id="page"> <div id="content"> <div class=

10个web前端基于jQuery动画插件及源码

1.超赞的页面加载进度自动指示和 Ajax 导航效果 在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等. 在线演示 源码下载 2.ProgressBar.js – 漂亮的响应式 SVG 进度条 ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 Progr

Jquery开发插件的方法

Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b){ return a+b; } }); 调用方法:$.add(3,4) - $=Jquery 为jquery类添加了名为add的一个静态方法,之后便可以在引入jquery的地方,使用这个方法了,$.add(3,4); (2)Jquery.fn.extend(object) $.fn相当于Jquery

一款基于jQuery日历插件的开发过程

这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: 废话不多说,如有错误,跪求各位大神指正,感谢!! ;(function($){ //创建一个日历插件    $.fn.Calendar = function(o){ //为这个日历插件创建一个构造函数        var Calendar = function(o,obj){            this.fnin(o,obj);        };//为日历

jquery.cookie 插件使用方法

一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="