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 相关文章推荐
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
关于element的表单组件整理笔记
Feb 05 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
拼音码表的生成
2006/10/09 PHP
十天学会php之第七天
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
jquery attr 设定src中含有&(宏)符号问题的解决方法
2011/07/26 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
js数组的操作详解
2013/03/27 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python实现决策树分类
2018/08/30 Python
python SocketServer源码深入解读
2019/09/17 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python集合操作方法详解
2020/02/09 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
办公室助理岗位职责
2013/12/25 职场文书
食品安全工作实施方案
2014/03/26 职场文书
小学生期末评语大全
2014/04/21 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
干部培训简讯
2015/07/20 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书