table切换jquery插件 jQuery插件写法模板 流程

1. 通过$.extend()来扩展jQuery
2. 通过$.fn 向jQuery添加新的方法
3. 通过$.widget()应用jQuery UI的部件工厂方式创建

1. 通过$.extend()来扩展jQuery

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('Wayou'); 

2 通过$.fn 向jQuery添加新的方法

<div class="table-container">
<ul class="table-title clearfix" >
<li class="active">第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<div class="table-content-wrap">
<div class="table-content active">111</div>
<div class="table-content">222</div>
<div class="table-content">333</div>
<div class="table-content">444</div>
</div>
</div>
<div class="table-container">
<ul class="table-title clearfix" >
<li class="active">第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<div class="table-content-wrap">
<div class="table-content active">1111</div>
<div class="table-content">2222</div>
<div class="table-content">3333</div>
<div class="table-content">4444</div>
</div>
</div>

.table-container{width:460px;height: 460px;margin:50px auto;border: 1px solid #ddd;padding:30px;color: #333;}
.table-title{height:50px;line-height: 50px;text-align: center;font-size: 14px;}
.table-title li{width: 25%;cursor:pointer;float: left;}
.table-title li{cursor:pointer;float: left;}
.table-title li.active{background: grey;color: #fff;}
.table-content-wrap>div{height: 350px;text-align: center;line-height: 350px;}
.table-content-wrap>div{width:100%;padding: 20px;display: none;}
.table-content-wrap>div:nth-child(1){background: pink;}
.table-content-wrap>div:nth-child(2){background: grey;}
.table-content-wrap>div:nth-child(3){background: yellowgreen;}
.table-content-wrap>div:nth-child(4){background: purple;}
.table-content-wrap>div.active{display: block;}

;(function($) {
$.fn.tableSwitch = function() {
return this.each(function() {

var tableEl = $(this).children('.table-title').find('li'),
tableCon = $(this).find('.table-content');
tableEl.click(function(event) {
var i = $(this).index();
switchClass(tableEl, 'li');
switchClass(tableCon, 'div');
function switchClass(el, elName) {
el.eq(i).addClass('active').siblings(elName).removeClass('active');
}

})
})
}

$('.table-container').tableSwitch();

})(jQuery);