jQuery插件tabBox的实现代码

我查看了jq(http://docs.jquery.com/Plugins/Authoring)的官方插件编写文档和文档中推荐的Mike Alsup编写的一个插件开发模式。英语不是很好，但是我还是努力去读(我可以学习知识，练习英语，为什么不呢)，根据猫画虎写了一本出道书，——tabBox。顾名思义，这个插件方便生成一个带有tab功能的“盒子”。看图理解

这个功能在网页上非常有效，不管是前台还是后台。在这里，我首先为定制插件提供三个参数。复制的代码如下： $ . fn . tab box . defaults={ width : 260，height 3360 200，basepath :' tabbox/'}。宽度和高度定义“框”的宽度和高度，basePath用于定义使用插件的页面到插件文件夹的相对路径。当这个选项出现时，它必须这样做，因为标签页的样式中使用了图片，并且需要一个引用路径来正确找到图片的路径。它还引用了一个名为jqtransform的插件(http://www . DFC-e.com/metiers/multimedia/open source/jqtransform/)，该插件还有一个用于指定图片文件夹位置的参数。当然还有另外一种方式，就是像WebUI (http://www.jqueryui.com/)一样，把样式写入css文件，这样图片的引用首先是css文件的路径，两者都是插件的组件，相对路径强度不变。所以没有必要提供这条路径。只是因为这个插件使用的样式比较少，所以没有采用这个方法。插件的原理很简单，核心函数是一个render()，用来渲染tab的样式：复制代码如下： $ . fn . tab box . render=function(){ $(')。tabbox ')。CSS({ width : $ . fn . tabbox . defaults . width ' px '，height : $ . fn . tabbox . defaults . height ' px '，位置： 'relative '，边框： '1px #ccc solid '，背景： ' URL($ . fn . tabbox . defaults . base path ' tabbhead . gif)左上角repeat-x ' })；$('.tab box H2’)。每个(函数(i){ $(this))。css({ width : '80px '，height : '30px '，position : 'absolute '，' border-top' : 'none '，游标： 'pointer '，left : 10 (i*80)，background : ' URL '($ . fn . tabbox . defaults . base path ' tabbnormal . gif)右上无重复'，' text-align' : '居中'，' font-size ' 333366});$('.tab box div’)。每个(函数(){ $(this))。CSS({ width : $ . fn . tabbox . defaults . width ' px '，height :($ . fn . tabbox . defaults . height-30)' px '，display : 'none '，position : 'absolute '，top : ' 30px ' })；});$('.tab box H2 . CurTab’)。CSS({ background : ' URL(' $ . fn . tabbox . defaults . base path ' tabcurtab . gif)顶端居中无重复'，' font-weight ' : ' bolder ' })；$('.tabBox h2.curTab div ')。CSS({ display : ' block ' })；};可以看到这个函数都是设置样式的代码。(我也体验过用jq设置css的快感，还记得e.style.backgroud的时代~)，这个功能保证了当前激活的标签和对应的信息显示出来。此外，通过捕获tab选项卡的click事件来更改当前激活标记，并再次呈现它。复制代码如下： $(. tabbox H2 ')。单击(function () {$ ('.tabboxh2 ')。remove class(' curtab ')；$(这个)。addCLaSS(' CurTab ')；$ . fn . TabBox . render()；});写作后的一些思考：1。我不太明白如何为插件定制选项。复制的代码如下：//在元素迭代之前构建主选项varopts=$。extend ({}，$。fn.tabbox.defaults，options)；//迭代并重新格式化每个匹配的元素返回this . each(function(){ $ this=$(this)；//构建元素特定选项var o=$。梅塔。$.extend({}，opts，$ this . data()): opts；这几乎是抄袭迈克阿尔苏普的文章。按照他的说法，好像可以自定义整个插件的选项，也可以定义某个特定元素的选项，但是我试过，好像不行~。我没听懂他说的话吗？2.目前，选项卡捕获点击事件。我想加强它。您可以自定义是捕获点击还是鼠标悬停。是的，您可以编写两个事件处理函数。但是如何通过配置决定调用哪个处理程序呢？包下载