jquery tab插件制作实现代码


Posted in Javascript onJune 22, 2010

jquery插件的基本格式:

(function($){ 
$.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称。可以更具自己喜好进行修改 
var defaults = { 
//相关属性设置 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//实现的功能设置 }); 
}; 
})(jQuery);

我这里是做一个tab的插件,我来完善以上代码
(function($){ 
$.fn.tab = function(options){ 
var defaults = { 
eventname:"click",//触发事件,click为点击,mousemove为鼠标移动 
titlekeyid:"tabtitle",//切换的ID 
sedcss:"sed",//选中时的CSS 
nosedcss:"nosed" //未选中时的CSS 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var tab=$(this); 
//绑定事件 
$(tab).find("li").bind(options.eventname,function(){ 
$("#"+options.titlekeyid).find("li").attr("class", options.nosedcss); 
$(this).attr("class", options.sedcss); 
$("#"+options.titlekeyid+"info").find("div").css("display", "none"); 
$("#"+$(this).attr("id")+"info").css("display", "block"); 
//个人JS能力还是有限,感觉代码写的不好 
}); 
}); 
}; 
})(jQuery);

我想大家都用过一些jquery插件,我这里看下插件使用时的代码:
(代码二)
<script type="text/javascript"> 
$().ready(function(){ 
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); 
}) 
</script>

结合以上两段代码进行说明
$("#tabtitle")表示你要使用在哪个地方,稍微了解jquery的童鞋都知道是什么意思了,不多介绍了, 
.tab 就是这个插件我们定义的函数名了,对照(代码一)中的$.fn.tab中的tab。 
.tab({eventname:"mousemove",sedcss:"sed"}); 中eventname和sedcss就是(代码一)var defaults ={};中定义的属性值了。如果我们不需要改变属性值,那么我们就使用默认的属性值,那么插件就应该这样使用 
<script type="text/javascript"> 
$().ready(function(){ 
$("#tabtitle").tab(); 
}) 
</script>

最后附上全部的页面代码:
<html> 
<head> 
<title>tab test</title> 
<script type="text/javascript" src="jquery.js"> 
</script> 
<script type="text/javascript" src="jquery.joyleetab.js"> 
</script> 
<script type="text/javascript"> 
$().ready(function(){ 
$("#tabtitle").tab({eventname:"mousemove",sedcss:"sed"}); 
}) 
</script> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<ul id="tabtitle">//这里的ID对应$("#tabtitle")中的ID,LI的ID分别是尾部添加数字 
<li id="tabtitle1" class="sed">asdfasfd</li> 
<li id="tabtitle2">asdfasfd</li> 
<li id="tabtitle3">asdfasfd</li> 
<li id="tabtitle4">asdfasfd</li> 
<li id="tabtitle5">asdfasfd</li> 
</ul> 
<div id="tabtitleinfo">//这里的ID对ul中的ID,ID分别是尾部添加数字和"info" 
<div id="tabtitle1info" >000000</div> 
<div id="tabtitle2info" style=" display:none">111111</div> 
<div id="tabtitle3info" style=" display:none">22222</div> 
<div id="tabtitle4info" style=" display:none">33333</div> 
<div id="tabtitle5info" style=" display:none">44444</div> 
</div> 
</body> 
</html>

此文重点在说明jquery插件的制作方法,示例中代码还有要优化的地方,请见谅
源码打包下载
Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 #Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 #Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 #Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 #Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 #Javascript
一段批量给页面上的控件赋值js
Jun 19 #Javascript
You might like
PHP正确配置mysql(apache环境)
2011/08/28 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
字符串的replace方法应用浅析
2011/12/06 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
python实现的简单文本类游戏实例
2015/04/28 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
C++的几个面试题附答案
2016/08/03 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
元旦晚会邀请函
2014/01/27 职场文书
军训考核自我鉴定
2014/02/13 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
美容院员工规章制度
2015/08/05 职场文书