jQuery插件 tabBox实现代码


Posted in Javascript onFebruary 09, 2010

查了一下jq的官方插件编写文档(http://docs.jquery.com/Plugins/Authoring)以及文档中推荐的Mike Alsup写的一篇A Plugin Development Pattern。英语不是很好,但还是努力看下来(既学习到知识又能练习英语,何乐不为),照猫画虎的写了一个处女作——tabBox。

顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子”的。看图一下就明白
jQuery插件 tabBox实现代码
这样功能在网页上是非常肠炎宁个的,不论前台后台。

在这,我首先提供了3个参数用于自定义插件,

$.fn.tabBox.defaults = { 
width : 260, 
height : 200, 
basePath : "tabBox/" 
};

width和height定义“盒子”的宽度和高度,basePath用于定义使用插件的页面对插件文件夹的相对路径。这个选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必须要有一个基准路径才能正确找到图片的路径。这也是参照了一个叫jqtransform(http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/)的插件的做法,他也有个参数用于指定图片文件夹所在的位置。当然还有一种做法,就是想WebUI(http://www.jqueryui.com/)一样,样式写到css文件里,这样图片的引用就是先对与css文件的路径了,而这两个都是插件的组成部分,相对路劲是不变的。所以不用提供这个路径了。只是由于这个插件用到的样式比较少,所以没有采用这个方法。

插件的原理很简单,核心的函数就是一个render(),用于渲染出tab的样式:

$.fn.tabBox.render = function() { 
$(".tabBox").css({ 
width : $.fn.tabBox.defaults.width+"px", 
height : $.fn.tabBox.defaults.height+"px", 
position : "relative", 
border : "1px #ccc solid", 
background : "url("+$.fn.tabBox.defaults.basePath+"tabHead.gif) top left repeat-x" 
}); 
$(".tabBox h2").each(function(i){ 
$(this).css({ 
width : "80px", 
height : "30px", 
position : "absolute", 
"border-top" : "none", 
cursor : "pointer", 
left : 10+(i*80), 
background : "url("+$.fn.tabBox.defaults.basePath+"tabNormal.gif) top right no-repeat", 
"text-align" : "center", 
"font-size" : "12px", 
"font-weight" : "normal", 
color : "#06c", 
"line-height" : "22px" 
}); 
}); 
$(".tabBox div").each(function(){ 
$(this).css({ 
width : $.fn.tabBox.defaults.width+"px", 
height : ($.fn.tabBox.defaults.height-30)+"px", 
display : "none", 
position : "absolute", 
top : "30px" 
}); 
}); 
$(".tabBox h2.curTab").css({ 
background : "url("+$.fn.tabBox.defaults.basePath+"tabCurTab.gif) top center no-repeat", 
"font-weight" : "bolder" 
}); 
$(".tabBox h2.curTab + div").css({ 
display : "block" 
}); 
};

可以看到这个函数全都是设置样式的代码,(也让我体验了一下用jq设置css的快感,依然记得e.style.backgroud的时代~),这个函数保证了显示当前被激活的标签和对应的信息。另外,通过捕捉tab选项卡的click事件来改变当前的激活标签,再渲染一次就可以了。
$(".tabBox h2").click(function(){ 
$(".tabBox h2").removeClass("curTab"); 
$(this).addClass("curTab"); 
$.fn.tabBox.render(); 
});

写完之后的一点思考:

1、对插件自定义选项的做法看不太懂

// build main options before element iteration 
var opts = $.extend({}, $.fn.tabBox.defaults, options); 
// iterate and reformat each matched element 
return this.each(function() { 
$this = $(this); 
// build element specific options 
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

这差不多是从Mike Alsup的文章中照搬过来的。照他的说法,好像是可以自定义整个插件的选项,还可以定义某一个特定元素的选项,可我试了一下,似乎不可以~。难道是我没看懂他说的?

2、目前tab是捕捉click事件的,我想加强一下,可以自定义是捕捉click还是mouseover,是的,可以写两个事件处理函数。但怎么样来通过配置决定调用哪个处理程序呢?
打包下载

Javascript 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
基于Jquery的简单&简陋Tabs插件代码
Feb 09 #Javascript
JQUERY操作JSON实例代码
Feb 09 #Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
javascript 解析url的search方法
Feb 09 #Javascript
You might like
php的一个简单加密解密代码
2014/01/14 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
竞争上岗实施方案
2014/03/21 职场文书
美容院店长岗位职责
2014/04/08 职场文书
产品开发计划书
2014/04/27 职场文书
学校三节实施方案
2014/06/09 职场文书
伦敦奥运会口号
2014/06/13 职场文书
2014年社区工作总结
2014/11/18 职场文书
质检员岗位职责
2015/02/03 职场文书
初中运动会前导词
2015/07/20 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js