自己动手开发jQuery插件教程


Posted in Javascript onAugust 25, 2011

因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别。),好了,废话少说,切入正题。

首先要了解jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。

什么? 你居然问什么是类级别和什么是对象级别?

类级别你可以理解为拓展jquery类,最简单的$.post(...);

对象级别则可以理解为基于对象的拓展,如$("#Me").fuck(...); 这里这个fuck呢,就是基于对象的拓展了。点到即止,想深入的童鞋请花RMB买书Or网上查资料,书上比俺介绍得更清楚。so...Next...

至于您要写一个什么东东呢?就轮到前面提到的类级别和对象级别的造型登场了,因为这写法大千世界无奇不有,千奇百怪,各有千秋,写法规范也不统一,俺就按俺觉得最简便的方法写了,Hava a Look!

<script type="text/javascript"> 
jQuery.msg = function () { 
alert("123"); 
}; 
</script> 
<script type="text/javascript"> 
$(function () { 
$.msg(); 
}); 
</script>

类级别写法:jQuery.插件名称=function(){.....};
调用方法:$.插件名称();
暴露参数这些东西,先暂时不提到。一步步来..
上面这玩意儿呢,弹出对话框插件,这么说,是先理解要紧,什么是插件,什么是类级别的插件?来看一下页面启动的效果,上图上真相,你懂的..
自己动手开发jQuery插件教程
来比较一下对象级别插件写法:Go on!
(function($) { 
$.fn.pluginName = function() { 
// 代码区域。 
}; 
})(jQuery);

对象级别写法:$.fn.插件名称 = function(){};多了一个fn,没错,是fn! fn!!! fn!!!

调用方法:$("#Me").插件名称();

稍微说一下,$.插件名称();是通过$访问调用jquery中的全局函数,直接可以通过jquery或者美元$调用,从而实现一些效果。

$("#Me").插件名称();是通过一个jquery对象所调用的一个函数,什么? 你居然发现这个写法外面一层多了个东东? 阿? 你问怎么回事?

The First,我们必须先了解一下闭包这个玩意儿的造型(框架),Look!,这就是传说中用来开发jQuery插件的东东

(function($){ 
//这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。 
})(jQuery);

(function($){ //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。})(jQuery);

这里function 后面的$参数,形参,在函数体内部的使用呢,$就是当前您当前整在调用该函数的对象了,这样就能干很多事了....你懂的。

用一个tabs面板切换插件来详细演示一下jQuery对象级别插件的具体开发,直接上代码。

首先上HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script src="jquery.tabs.js" type="text/javascript"></script> 
<link href="tabs.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(function () { 
$("#mytabs").tabs(); 
}); 
</script> 
</head> 
<body> 
<!--tabs示例--> 
<div id="mytabs"> 
<!--选项卡区域--> 
<ul> 
<li><a href="#tabs1">选项1</a></li> 
<li><a href="#tabs2">选项2</a></li> 
<li><a href="#tabs3">选项3</a></li> 
</ul> 
<!--面板区域--> 
<div id="tabs1">11111</div> 
<div id="tabs2">22222</div> 
<div id="tabs3">33333</div> 
</div> 
</body> 
</html>

再上插件源码:

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

<div id="tabs"> 
选项卡区域ul 
<ul> 
<li><a href="#div1">选项1</a></li> 
<li><a href="#div2">选项2</a></li> 
</ul> 
面板区域div 
<div id="div1">面板1</div> 
<div id="div2">面板2</div> 
</div>

样式:此样式为默认无任何效果样式,可根据需要修改插件样式。
*/ 
; (function ($) { 
$.fn.tabs = function (options) { 
var defualts = { switchingMode: "click" }; 
var opts = $.extend({}, defualts, options); 
var obj = $(this); 
var clickIndex = 0; 
obj.addClass("tabsDiv"); 
$("ul li:first", obj).addClass("tabsSeletedLi"); 
$("ul li", obj).not(":first").addClass("tabsUnSeletedLi"); 
$("div", obj).not(":first").hide(); 
$("ul li", obj).bind(opts.switchingMode, function () { 
if (clickIndex != $("ul li", obj).index($(this))) { 
clickIndex = $("ul li", obj).index($(this)); 
$(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi"); 
$(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi"); 
var divid = $("a", $(this)).attr("href").substr(1); 
$("div", obj).hide(); 
$("#" + divid, obj).show(); 
}; 
}); 
}; 
})(jQuery);

接下来上插件样式:
body{background-color: black;} 
.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;} 
.tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;} 
.tabsDiv div{width: 500px;height: 330px;background-color: white;} 
.tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;} 
.tabsSeletedLi a{width: 100px;height: 20px;color: black;} 
.tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;} 
.tabsUnSeletedLi a{width: 100px;height: 20px;color: white;}

最终效果图,你懂的:
自己动手开发jQuery插件教程

自己动手开发jQuery插件教程

自己动手开发jQuery插件教程
原文:http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html
Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
可以将word转成html的js代码
Apr 11 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
从vue源码看props的用法
Jan 09 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 #Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python selenium firefox使用详解
2019/02/26 Python
Python如何获取文件路径/目录
2020/09/22 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
英文自荐信常用句子
2014/03/26 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
无线电知识基础入门篇
2022/02/18 无线电
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript