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);

转载于:https://www.cnblogs.com/xiaomaotao/p/7273573.html