繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery插件 tabBox实现代码
- Javascript
- JQuery Tips(3) 关于$()包装集内元素的改变
- JavaScript 创建随机数和随机图片
- javascript document.execCommand() 常用解析
- firefox下对ajax的onreadystatechange的支持情况分析
- Javascript attachEvent传递参数的办法
- jQuery Attributes(属性)的使用(一、属性篇)
- jquery自动完成插件(autocomplete)应用之PHP版
- 查询绑定数据岛的表格中的文本并修改显示方式的js代码
- 讨论javascript(一)工厂方式 js面象对象的定义方法
- IE不支持option的display样式，只能使用remove和add
- 多浏览器兼容的获取元素和鼠标的位置的js代码
- js checkbox全选并将获取值放到input里边
- javascript 日期联动选择器 [其中的一些代码值得学习]
- javascript实现的仿51job地址多项选择方式效果
- jQuery 渐变下拉菜单
- 利用图片的 onerror 事件载入默认图片
- js实现页面打印功能实例代码(附去页眉页脚功能代码)
- JQuery读取XML文件数据并显示的实现代码
- 比较详细的关于javascript 解析json的代码
- TextArea 控件的最大长度问题(js json)
Javascript 中的 jQuery插件 tabBox实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 93 ::
收藏到网摘: n/a
最近对js以及jq产生了浓厚的兴趣，看到jq有很多很好用的插件，功能各异，包括webUI,jqGrid等等。心里萌发了制作属于自己的jq插件的想法。 查了一下jq的官方插件编写文档（http://docs.jquery.com/Plugins/Authoring）以及文档中推荐的Mike Alsup写的一篇A Plugin Development Pattern。英语不是很好，但还是努力看下来（既学习到知识又能练习英语，何乐不为），照猫画虎的写了一个处女作——tabBox。
顾名思义，这个插件就是方便的产生具有tab选项卡功能“盒子”的。看图一下就明白
这样功能在网页上是非常肠炎宁个的，不论前台后台。
在这，我首先提供了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，是的，可以写两个事件处理函数。但怎么样来通过配置决定调用哪个处理程序呢？
打包下载
评论 (0) All
