封裝jQuery外掛程式實現TAB切換

先上效果圖：

直接上**：

index.html

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>demo
title
>
<
script 
src='jquery.js'
>
script
>
<
script 
src='tab.js'
>
script
>
<
style
>
*.tab
.tab .tab-ul
.tab .tab-ul .tab-li
.tab .tab-ul .active
.tab .content-warp
.tab .content-warp .content
.tab .content-warp .content img
.tab .content-warp .current
style
>
head
>
<
body
>
<
div 
class
="tab"
data-config
=''>
<
ul class
="tab-ul"
>
<
li class
="tab-li active"
>新聞
li>
<
li class
="tab-li"
>熱點
li>
<
li class
="tab-li"
>軍事
li>
<
li class
="tab-li"
>社會
>新聞2
li>
<
li class
="tab-li"
>熱點2
li>
<
li class
="tab-li"
>軍事2
li>
<
li class
="tab-li"
>社會2
>新聞2
li>
<
li class
="tab-li"
>熱點2
li>
<
li class
="tab-li"
>軍事2
li>
<
li class
="tab-li"
>社會2

(var tab = function

(ele);

$.extend(

this

.config, config);

//預設位址

this.index = this

.config.invoke;

//點選事件

this.switch

();

//預設顯示

this

.invoke();

//輪播

this

.loopfun();

};tab.prototype =

that.addindex(index);

}).on('mouseout', function

() });

}else

that.addindex(index);

}).on('mouseout', function

());}},

"invoke":function

(),"addindex":function

(index)

else

},"loopfun":function

(), that.config.time)}}

}//註冊成jquery方法

$.fn.extend()

return

this

; }

})window.tab =tab;

}(jquery)

標籤可隨意設定成文字或其他內容，可自行修改。

依自己的理解對切換邏輯進行修改：

1.mousove觸發切換時只有mouseout才會繼續輪訓切換

2.click觸發切換時當滑鼠在切換頁也只有mouseout才會繼續輪訓切換

jQuery外掛程式的封裝

jquery外掛程式的封裝 fn上面新增乙個方法當需要給jquery物件 增加方法時，可以設定 fn下面新增乙個方法 這樣新增好以後，jquery物件就有這個方法了div div divs div div div p p p 當需要給jquery物件 增加方法時，可以設定 fn下面新增乙個方法 這樣...

封裝簡單的jquery外掛程式

1.定乙個閉包區域，防止外掛程式 汙染 閉包限定命名空間 function window.jquery 2.jquery.fn.extend object 擴充套件jquery 方法，製作外掛程式 閉包限定命名空間 function window.jquery 3.給外掛程式預設引數，實現 外掛程式...

jQuery外掛程式封裝入門

jquery外掛程式我們用的很多，也很好用，我在生產任務中也碰到了很多冗餘 我就想把他們封裝起來，一直百思不得其解，現在捅破了這個窗戶紙，分享給大家。首先大家對prototype這個方法應該不陌生，array.prototype.say function str 這樣就給陣列增加了乙個新的方法，用的...