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

　　

在jquery中,插件开发常见的有:

　　

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

　　

还有一种是扩展在原型对象.fn美元上面的,开发出来的插件是用在dom元素上面的

　　

<强>一、类级别的扩展

　　 　　 　　美元。showMsg=function () { 　　alert('你好,欢迎学习jquery插件开发的); 　　}//美元.showMsg (); 　　之前 　　 　　

注意要提前引入jquery库,上例在美元函数上面添加了一个方法showMsg,那么就可以用美元.showMsg()调用了

　　 　　 　　美元。showName=function () { 　　控制台。日志(“ghostwu”); 　　} 　　美元.showName (); 　　之前 　　 　　

这种插件比较少见,一般都是用来开发工具方法,如jquery中美元的。修剪,.isArray美元()等等

　　

<强>二,把功能扩展在.fn美元上,

　　

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

　　 　　 　　.fn美元。showValue=https://www.yisu.com/zixun/function () { 　　返回$ ().val (); 　　} 　　 　　$(函数(){ 　　$("输入").click(函数(){//警报($).showMsg ()); 　　警报($).showMsg ()); 　　}）; 　　}）; 　　 　　& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/点我”比; 　　 　　之前 　　 　　

在美元。fn上添加一个showValue方法,返回当前元素值的值。在获取到页面输入元素,绑定事件之后,就可以调用这个方法,显示按钮的值“点我”,在实际插件开发中,常用的就是这种。接下来,我们就用这种扩展机制开发一个简单的选项卡插件:

　　

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

　　

页面布局与样式:

　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比; 　　& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比; 　　& lt; title> Document 　　& lt;脚本src=" https://cdn.bootcss.com/jquery/1.12.0/jquery.js "祝辞& lt;/script> 　　& lt; style> 　　{#选项卡 　　宽度:400 px; 　　高度:30 px; 　　} 　　# #标签li标签ul { 　　list-style-type:没有; 　　} 　　#标签ul { 　　宽度:400 px; 　　高度:30 px; 　　边界底部:1 px固体# ccc; 　　行高:30 px; 　　} 　　李#标签ul { 　　浮:左; 　　margin-left: 20 px; 　　填充:0 px 10 px; 　　} 　　李#标签ul。活跃的{ 　　背景:黄色; 　　} 　　#标签ul李{ 　　文字修饰:没有; 　　颜色:# 666; 　　} 　　#标签div { 　　宽度:400 px; 　　身高:350 px; 　　background - color: # ccc; 　　} 　　.clearfix:{后 　　内容:”; 　　显示:块; 　　明确:; 　　高度:0; 　　可见性:隐藏; 　　} 　　& lt;/style> 　　& lt;脚本src=" https://www.yisu.com/zixun/tab2.js "祝辞& lt;/script> 　　& lt; script> 　　$(函数(){ 　　$(" #选项卡”)。标签({evType:“鼠标悬停”}); 　　}）; 　　& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=把∠羁ā北? 　　& lt; ul类=癱learfix”比; 　　& lt; li> & lt; a href=" https://www.yisu.com/zixun/tab1”在选项1 & lt;/a> & lt;/li> 　　& lt; li> & lt; a href=" https://www.yisu.com/zixun/tab2”在选项2 & lt;/a> & lt;/li> 　　& lt; li> & lt; a href=" https://www.yisu.com/zixun/tab3”在选项3 & lt;/a> & lt;/li> 　　& lt;/ul> 　　& lt; div id=" tab1 "在作者:ghostwu (1) 　　& lt; div>博客:http://www.cnblogs.com/ghostwu/
　　& lt;/div> 　　& lt; div id=" tab2 "在作者:ghostwu (2) 　　& lt; div>博客:http://www.cnblogs.com/ghostwu/
　　& lt;/div> 　　& lt; div id=" tab3”在作者:ghostwu (3) 　　& lt; div>博客:http://www.cnblogs.com/ghostwu/