jquery插件开发之选项卡制作详解

在jquery中，插件开发常见的有：

一种是为$函数本身扩展一个方法，这种是静态扩展（也叫类扩展),这种插件一般是工具方法，

还有一种是扩展在原型对象$.【数学】函数上面的，开发出来的插件是用在数字正射影像图元素上面的

一、类级别的扩展

$.showMsg=function(){ alert('您好，欢迎学习jquery plugin dev’)；} //$.showMsg()；注意要提前引入jquery库，上例在$函数上面添加了一个方法showMsg，那么就可以用$.showMsg()调用了

$.show name=function(){ console。日志(《鬼武》)；} $.show name()；这种插件比较少见，一般都是用来开发工具方法，如jquery中的$.修剪，$。isArray()等等

二、把功能扩展在$.【数学】函数上，

这种插件就是用在元素上，比如，我扩展一个功能，点击按钮，显示当前按钮的值

$ .fn。show value=function(){ return $(this).val()；} $(function(){ $(“input”)).单击(function(){ //alert($(this)).showMsg())；警报($(本)).showMsg())；});});输入类型='按钮'值='点我'在$.【数学】函数上添加一个显示值方法，返回当前元素的价值值。在获取到页面投入元素，绑定事件之后，就可以调用这个方法，显示按钮的值'点我，在实际插件开发中，常用的就是这种。接下来，我们就用这种扩展机制开发一个简单的选项卡插件：

页面布局与样式：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http 3360https://cdn。bootscs。com/jquery/1。12 .0/jquery。js '/脚本样式# tab { width 3360400 px高度：30 px} #制表符li、#制表符ul {列表样式-类型：无；} # tab ul { width :400 px heart : 30pxborder-bottom :1 px实心# ccc线高： 30px} # tab ul li { float:left左边距left : 20pxpadding :0 px 10px } # tab ul Li。活动{背景：黄色；} # ul阿利标签{ text-摆设：无；color : # 666 } # tab div { width :400 px高度：350 px背景色： # CCC} .clearfix:after在{内容： }之后；显示器：块；clear:两者；高度： 0;可见性：隐藏；}/style script src=' http : tap 2。js '/script script $(function(){ $(' # tab ')).制表符({ EvType : '鼠标悬停' })；});/script/head body div id=' tab ' ul class=' clear fix ' lia href=' # tab 1 '选项1/a/li lia选项2/a/li lia选项3/a/li /ul div id='tab1 '作者：幽灵(1)分区博客： http://www.cnblogs.com/ghostwu//div/分区id='tab2 '作者：ghostwu(2)分区博客： http://www.cnblogs.com/ghostwu//div/分区id='tab3 '作者：ghostwu(3)分区博客： http://www.cnblogs.com/ghostwu//div/div/div/body/html选项卡2。射流研究…文件

；(函数($){ $。fn。tab=function(opt){ var def={ ev type : ' click ' }；//定义了一个默认配置var opts=$ .extend({}，def，opt)；var obj=$(this)；$('ul li:first '，obj).添加CLaSS(' active ')；儿童(' div ').hide()；儿童(' div ').等式(0).show()；$(“ul Li”，obj).bind(opts.evType，function () { $(this)).attr('class '，' active ').兄弟姐妹('里').attr('class '，' ')；var id=$(this).查找(' a ').attr('href ').子串(1);儿童(' div ').hide()；$("#"id，obj).show()；});};})(jQuery)；1,一个自执行函数，把插件封装成模块，把jQuery对象传给形参$

2,第3行，定义一个默认配置，选项卡的触发类型，默认为点击事件

3,第四行，如果选择传参，就用选择的配置，否者就用第3行的默认配置，这行的作用就是为了在不改变插件源码的情况下，可以配置插件的表现形式

4,第7-9行，让选项卡第一个差异显示，其余的都隐藏，让第一个标签加上class='active '黄色高亮选中

5.在第11-16行，单击相应的选项卡以显示和隐藏相应的div

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。