10分钟学会写Jquery插件实例教程

有很多朋友都用过jquery插件，但是很少有人自己动手写过jQuery插件，本文就以实例形式简单叙述了jQuery插件的实现方法。分享给大家供大家参考之用。具体方法如下：
 
具体而言，其实就是把一些常用、实用、通用的功能封装起来而以，简单的来讲就是把这些代码放在一个方法里面，可以达到重复使用的效果，这样就可以不需要每次要用此功能的时候都去重新写一遍。
 
现在Jquery里面加入了插件的概念，只要按照它特定的格式当作平时写function一样去写就可以了，不虽然搞得太复杂的。信不信由你们，反正我信了。
 
接下来用简单的代码来讲解一下，如果大家看了还不会写插件的话，我只能表示无语了

具体步骤如下：

第一步：定义插件

$(function() {
  $.fn.插件名称 = function(options) {
   var defaults = {
     Event : "click",    //触发响应事件
     msg : "Holle word!"    //显示内容
   };
   var options = $.extend(defaults,options);
   var $this = $(this);    //当然响应事件对象
   //功能代码部分
   //绑定事件
   $this.live(options.Event,function(e){
     alert(options.msg);
   });
  }
});

第二步：调用插件

$(function() {
  //绑定元素事件
  $("#test").插件名称({
   Event : "click",    //触发响应事件
   msg : "插件原来就是这么简单!"   //显示内容
  });
});

至此，最简单的插件搞定！10分钟不到！相信大家应该都看懂了吧！jQuery插件原来就这么简单。

赞 (0)

相关推荐

  • 使表格的标题列可左右拉伸jquery插件封装

    插件名称命名为:jquery.tableresize.js,代码如下: 复制代码 代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table的各列可以左右拉伸,从而使宽度变小或变大 用法: 单个table:$("#table_id").tableresize();    页面所有table:$("table").tableresize(); */ (function ($) {     $.fn

  • jquery插件之easing使用

    复制代码 代码如下: <script> $(function(){ $.easing.def="easeInQuad";//设置默认效果 var callback=function (){ alert("ok"); } $("#t1").animate({ "top":600 },{duration: 3000, easing:"easeInQuad",//可省略 complete: callb

  • Jquery插件之多图片异步上传

    Jquery插件之多图片异步上传

    1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_

  • myeclipse安装jQuery插件的方法

    myeclipse安装jQuery插件的方法

    1.在网上下载spket-1.6.12.zip压缩文件,解压后会看到eclipse目录下有features.plugins这两个文件夹 2.把features.plugins这两个文件夹下的文件复制黏贴到D:\myeclipse6.5\myeclipse\eclipse\目录下(注意features.plugins要对应清楚哦),然后重启myeclipse 3.重启myeclipse后,打开window -> preference -> spket -> javascript profi

  • jquery插件冲突(jquery.noconflict)解决方法分享

    许多的 JS 框架类库都选择使用$符号作为函数或变量名,jQuery是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾.jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交. jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • 跟我一起学写jQuery插件开发方法（附完整实例及下载）

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能 这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还

  • Jquery插件 easyUI属性汇总

    此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)modal:是否生成模态窗口.true[是] false[否]                   2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel    

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • 六款帮助你实现惊艳视差滚动效果的jQuery插件

    六款帮助你实现惊艳视差滚动效果的jQuery插件

    在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果.下面是一些运用视差滚动效果的优秀网页案例: 视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Parallax Scrolling)是当下流行的网页设计技术,通过让多层背景以不同的速度或者不同的方向

随机推荐