自己动手开发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 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jquery图片切换插件
Mar 16 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python 移动光标位置的方法
2019/01/20 Python
python3中property使用方法详解
2019/04/23 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python ftplib模块使用代码实例
2019/12/31 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
浅析Python __name__ 是什么
2020/07/07 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
英国复古服装购物网站:Collectif
2019/10/30 全球购物
首都博物馆观后感
2015/06/05 职场文书
会议营销主持词
2015/07/03 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
python实现商品进销存管理系统
2022/05/30 Python