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 空位补零实现代码
Feb 26 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
javascript实现获取服务器时间
May 19 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
一个可复用的vue分页组件
May 15 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
python学习数据结构实例代码
2015/05/11 Python
python logging模块的使用总结
2019/07/09 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
弘扬职业精神演讲稿
2014/03/20 职场文书
写字楼租赁意向书
2014/07/30 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS