自己动手开发jQuery插件教程_jquery_脚本之家

作者:联系我们

查了一下jq的官方插件编写文档( Alsup写的一篇A Plugin Development Pattern。英语不是很好,但还是努力看下来,照猫画虎的写了一个处女作——tabBox。

因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别。),好了,废话少说,切入正题。 首先要了解jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。 什么? 你居然问什么是类级别和什么是对象级别? 类级别你可以理解为拓展jquery类,最简单的$.post; 对象级别则可以理解为基于对象的拓展,如$; 这里这个fuck呢,就是基于对象的拓展了。点到即止,想深入的童鞋请花RMB买书Or网上查资料,书上比俺介绍得更清楚。so...Next... 至于您要写一个什么东东呢?就轮到前面提到的类级别和对象级别的造型登场了,因为这写法大千世界无奇不有,千奇百怪,各有千秋,写法规范也不统一,俺就按俺觉得最简便的方法写了,Hava a Look! 复制代码 代码如下:

顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子”的。看图一下就明白这样功能在网页上是非常肠炎宁个的,不论前台后台。 在这,我首先提供了3个参数用于自定义插件, 复制代码 代码如下: $.fn.tabBox.defaults = { width : 260, height : 200, basePath : "tabBox/" }; width和height定义“盒子”的宽度和高度,basePath用于定义使用插件的页面对插件文件夹的相对路径。这个选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必须要有一个基准路径才能正确找到图片的路径。这也是参照了一个叫jqtransform(

类级别写法:jQuery.插件名称=function(){.....}; 调用方法:$.插件名称(); 暴露参数这些东西,先暂时不提到。一步步来.. 上面这玩意儿呢,弹出对话框插件,这么说,是先理解要紧,什么是插件,什么是类级别的插件?来看一下页面启动的效果,上图上真相,你懂的..

插件的原理很简单,核心的函数就是一个render(),用于渲染出tab的样式:复制代码 代码如下:$.fn.tabBox.render = function.css({ width : $.fn.tabBox.defaults.width+"px", height : $.fn.tabBox.defaults.height+"px", position : "relative", border : "1px #ccc solid", background : "url("+$.fn.tabBox.defaults.basePath+"tabHead.gif) top left repeat-x" }); $.each.css({ width : "80px", height : "30px", position : "absolute", "border-top" : "none", cursor : "pointer", left : 10+, background : "url("+$.fn.tabBox.defaults.basePath+"tabNormal.gif) top right no-repeat", "text-align" : "center", "font-size" : "12px", "font-weight" : "normal", color : "#06c", "line-height" : "22px" }); }); $.each.css({ width : $.fn.tabBox.defaults.width+"px", height : ($.fn.tabBox.defaults.height-30)+"px", display : "none", position : "absolute", top : "30px" }); }); $.css({ background : "url("+$.fn.tabBox.defaults.basePath+"tabCurTab.gif) top center no-repeat", "font-weight" : "bolder" }); $(".tabBox h2.curTab + div").css({ display : "block" }); }; 可以看到这个函数全都是设置样式的代码,(也让我体验了一下用jq设置css的快感,依然记得e.style.backgroud的时代~),这个函数保证了显示当前被激活的标签和对应的信息。另外,通过捕捉tab选项卡的click事件来改变当前的激活标签,再渲染一次就可以了。 复制代码 代码如下:$.click{ $.removeClass.addClass; $.fn.tabBox.render; 写完之后的一点思考: 1、对插件自定义选项的做法看不太懂 复制代码 代码如下:// build main options before element iteration var opts = $.extend({}, $.fn.tabBox.defaults, options); // iterate and reformat each matched element return this.each { $this = $; // build element specific options var o = $.meta ? $.extend({}, opts, $this.data : opts; 这差不多是从Mike Alsup的文章中照搬过来的。照他的说法,好像是可以自定义整个插件的选项,还可以定义某一个特定元素的选项,可我试了一下,似乎不可以~。难道是我没看懂他说的? 2、目前tab是捕捉click事件的,我想加强一下,可以自定义是捕捉click还是mouseover,是的,可以写两个事件处理函数。但怎么样来通过配置决定调用哪个处理程序呢? 打包下载

来比较一下对象级别插件写法:Go on! 复制代码 代码如下: { $.fn.pluginName = function; 对象级别写法:$.fn.插件名称 = function(){};多了一个fn,没错,是fn! fn!!! fn!!! 调用方法:$; 稍微说一下,$.插件名称();是通过$访问调用jquery中的全局函数,直接可以通过jquery或者美元$调用,从而实现一些效果。 $;是通过一个jquery对象所调用的一个函数,什么? 你居然发现这个写法外面一层多了个东东? 阿? 你问怎么回事? The First,我们必须先了解一下闭包这个玩意儿的造型,Look!,这就是传说中用来开发jQuery插件的东东 复制代码 代码如下: { //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。 }){ //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。}); 这里function 后面的$参数,形参,在函数体内部的使用呢,$就是当前您当前整在调用该函数的对象了,这样就能干很多事了....你懂的。 用一个tabs面板切换插件来详细演示一下jQuery对象级别插件的具体开发,直接上代码。 首先上HTML: 复制代码 代码如下:

  • 选项1
  • 选项2
  • 选项3

11111

22222

33333

再上插件源码: /* tabs面板插件,版本1.0 用法:$.tabs({switchingMode:"click"}); 参数解释:switchingMode是面板切换的模式,如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。 整体tabs骨架不变,依然是常用的结构如下: 复制代码 代码如下:

本文由杏彩发布,转载请注明来源

关键词: