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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue cli 全面解析
Feb 28 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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输出表格的实现代码(修正版)
2010/12/29 PHP
php实现三级级联下拉框
2016/04/17 PHP
php 常用的系统函数
2017/02/07 PHP
javascript 面向对象 function类
2010/05/13 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python3进制之间的转换代码实例
2019/08/24 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
中文系师范生自荐信
2013/10/01 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
搞笑征婚广告词
2014/03/17 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2014年团委工作总结
2014/11/13 职场文书