自己动手开发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 相关文章推荐
JS 自定义带默认值的函数
Jul 21 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
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
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
Node.js文件操作详解
2014/08/16 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
企业给企业的表扬信
2014/01/13 职场文书
《落花生》教学反思
2016/02/16 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js