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 相关文章推荐
js怎么终止程序return不行换jfslk
May 30 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 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 - Html Transfer Code
2006/10/09 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
ThinkPHP路由详解
2015/07/27 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python 6行代码制作月历生成器
2020/09/18 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
大学生求职中的自我评价
2013/10/01 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
田径运动会广播稿
2015/08/19 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python