[js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

jquery插件一般是这么干的： $.fn.插件名称 = function(){}， 把插件的名称加在.fn上，在源码里面实际上是扩展到构造函数的原型对象上，如果你没看过jquery的源代码，或者你曾经看过，但是不知道为什么把插件扩展到fn上，那么本篇文章就能解答你的疑惑。关于jquery插件开发方式，可以参考我的这篇文章：[js高手之路]jquery插件开发实战-选项卡详解

关于选项卡这个功能具体怎么做，不在这里详解，这个是入门级的功能，本文重在讨论插件开发的架构，扩展，以及参数设置。

如果你使用过jquery的选项卡插件，或者其他类型的插件，他们一般都是这么调用的：

$( ".tab" ).tabs( {} )

$(".tab").tabs( function(){} );

一种是传递参数定制插件行为

一种是传递函数定制插件行为

$(".tab") 选择到元素，然后返回的是jquery对象

tabs方法扩展在fn上就是扩展都jquery构造函数的原型对象上， 那么对象( $(".tab") )调用原型对象上的方法( tabs )当然就顺利成章了。

所以jquery插件扩展本质就是： 构造函数 + 原型对象扩展方法

定义一个构造+原型的方式，下面代码的原理，我在这篇文章有详细论述：[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: Tahoma, Verdana,"Microsoft Yahei";
}
a{
text-decoration: none;
color:#000;
}
ul,li{
list-style-type: none;
}
img {
border:none;
}
.main {
width:960px;
margin:20px auto;
}
.tab{
margin: 0 auto 20px;
}
.tab1 .tab-nav{
margin-bottom:8px;
}
.tab .tab-nav {
overflow:hidden;
}
.tab1 .tab-nav .active{
border-bottom:1px solid #000;
}
.tab1 .tab-nav li {
float:left;
margin:0 10px;
}
.tab1 .tab-nav li a {
line-height:40px;
display:block;
}
.tab1 .tab-content {
height:250px;
overflow:hidden;
}
.tab1 .tab-content p {
height:250px;
background:#eee;
}

View Code
最终效果：