jquery插件之选项卡
jQuery插件編寫(xiě)
首先來(lái)一個(gè)簡(jiǎn)拓展jQuery對(duì)象的方法
<body > <p>23</p> <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="js/plugin.js"></script>//這個(gè)里面的內(nèi)容，首先自執(zhí)行函數(shù)
(function($){
$.fn.extend({
"bold":function(){
return this.css({"fontWeight":"bold"});
}
});
})(jQuery)
// <script type="text/javascript"> $(function(){$("p").bold();//調(diào)用 }) </script> </body>
效果：
jQuery的插件機(jī)制
1.jQuery.extend()方法有一個(gè)重載
jQuery.extend(object) ，一個(gè)參數(shù)用于擴(kuò)展jQuery類本身，也就是用來(lái)在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點(diǎn)像"類名.方法名"靜態(tài)方法的調(diào)用。一下是jQuery.extend(object)例子
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/plugin.js"></script>
//這個(gè)里面的內(nèi)容
jQuery.extend({
?"minValue":function(a,b){
?return a<b? a:b;
},
?"maxValue":function(a,b){
?return a>b? a:b;
}
})
//
<script type="text/javascript">
$(function(){
var i=100,j=101;
var min_v=$.minValue(i,j); //調(diào)用
console.log(min_v);
var max_v=$.maxValue(i,j);
console.log(max_v);
})
</script>
效果
100
101
重載版本：jQuery.extend([deep], target, object1,?[objectN])
deep:?????? 可選。如果設(shè)為true，則遞歸合并。
target:?????待修改對(duì)象。
object1:?? 待合并到第一個(gè)對(duì)象的對(duì)象。
objectN:?? 可選。待合并到第一個(gè)對(duì)象的對(duì)象。
合并setting和options,修改并返回settings
var settings={validate:false,limit:5,name:"foo"};
var option={validate:true,name:"bar"};
jQuery.extend(settings,option);
console.log(settings,option);
//也就是說(shuō)后面的參數(shù)如果和前面的參數(shù)存在相同的名稱，那么后面的會(huì)覆蓋前面的參數(shù)值。
效果
validate: true, limit: 5, name: "bar"
這個(gè)重載的方法，我們一般用來(lái)在編寫(xiě)插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)。
?
jQuery.fn.extend(object) 擴(kuò)展jquery元素提供的新方法（通常用來(lái)制作插件）
jQuery.fn=jQuery.prototype={
init:function(selector,context){......}
}
原來(lái)jQuery.fn=jQuery.prototype,也就是jQuery對(duì)象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對(duì)象的原型方法。
我們知道擴(kuò)展原型上的方法，就相當(dāng)于添加“成員方法”,類的“成員方法”要類的對(duì)象才能調(diào)用，所以使用jQuery.fn.extend(object)擴(kuò)展方法，jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開(kāi)來(lái)。
?
自執(zhí)行匿名函數(shù)/閉包
1.什么是自執(zhí)行的匿名函數(shù)？
他是指：(function(){? //code? })();
?
例如：
???bootstrap 框架中的插件寫(xiě)法：
???!function($){
//do something;
?? }(jQuery);
?
???和?
?? (function($){
//do something;
???})(jQuery); 是一回事。
匿名函數(shù)最大的用途就是創(chuàng)建閉包（這是Javascript語(yǔ)言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。
例如：
???? var a=1;
???? (function(){
var a=100;
})();
????? alert(a); //彈出 1
?
?一步步封裝jQuery插件
1.定一個(gè)閉包區(qū)域，防止插件”污染”//閉包限定命名空間
;(function($){
//code
})(jQuery);
2.jQuery.fn.extend(object)擴(kuò)展jquery方法，制作插件
//閉包限定命名空間
(function($){
$.fn.extend({
"tab":function(options){
//do something
}
});
})(jQuery);
第三步
;(function(options){
$.fn.extend({
"tab":function(options){
var default={
};
var options=$.extend({},defaults,options);
this.each(function(){
})
return this;
}
})
})(jQuery)
?直接上源碼
css:<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
ul,li{
list-style: none;
}
.tabBox{
width:400px;
height:500px;
}
.tabBox2{
width:400px;
height:500px;
}
.tabBar{
width:100%;
height:60px;
border:1px solid #ccc;
}
.tabBar li{
float:left;
width:33.33%;
height:58px;
text-align: center;
line-height: 58px;
border-right:1px solid #ccc;
cursor:pointer;
}
.tabBar li.hover{
background:#ddd;
}
.tabBar li:last-child{
border-right:0;
}
.tab_conts{
width:100%;
height:440px;
border:1px solid #ccc;
border-top:0;
}
.tab_conts .tab_cont{
float:left;
width:100%;
height:100%;
display:none;
}
.tab_conts .block{
display: block;
}
</style>
<div class="tabBox">
<ul class="tabBar">
<li class="hover">標(biāo)題一</li>
<li>標(biāo)題二</li>
<li>標(biāo)題三</li>
</ul>
<div class="tab_conts">
<div class="tab_cont block">1</div>
<div class="tab_cont">2</div>
<div class="tab_cont">3</div>
</div>
</div>
<br/>
<div class="tabBox2">
<ul class="tabBar">
<li class="hover">標(biāo)題一</li>
<li>標(biāo)題二</li>
<li>標(biāo)題三</li>
</ul>
<div class="tab_conts">
<div class="tab_cont block">1</div>
<div class="tab_cont">2</div>
<div class="tab_cont">3</div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/tab.js"></script>
//tab.js內(nèi)部代碼
;(function($){
$.fn.extend({
'tab':function(options){
console.log(options);
var defaults={
currentClass:"hover",
tabLi:".tabBar>li",
tabCont:".tab_conts>div",
eventType:"click"
//各種參數(shù)，各種屬性
};
//這個(gè)是利用extend方法把 defaults對(duì)象的方法屬性全部整合到 options里，
var endoptions=$.extend(defaults,options);
var _this=$(this);
_this.find(endoptions.tabLi).on(endoptions.eventType,function(){
$(this).addClass(endoptions.currentClass).siblings().removeClass(endoptions.currentClass);
var index=$(this).index();
_this.find(endoptions.tabCont).eq(index).show().siblings().hide();
})
return this;
}
})
})(jQuery)
//
<script type="text/javascript">
$(".tabBox").tab({
//各種參數(shù)，各種屬性
eventType:"click"
});
$(".tabBox2").tab({
//各種參數(shù)，各種屬性
eventType:"click"
});
</script>
效果圖：
?github演示地址：
https://ledis.github.io/tab_plugins/tab.html
帶自動(dòng)的選項(xiàng)卡
https://ledis.github.io/autoTab-plugin/tab2.html
參考地址：
http://www.cnblogs.com/joey0210/p/3408349.html
http://blog.csdn.net/chenxi1025/article/details/52222327
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhihou/p/8023282.html
總結(jié)
以上是生活随笔為你收集整理的jquery插件之选项卡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 员工信息增删改查程序 (大神版)
- 下一篇： 10大主流压力测试工具推荐(转载)