#基于JQ的選項卡組件開發
```
<style>
#div1 input, #div2 input, #div3 input, #div4 input{ cursor: pointer; }
#div1 div, #div2 div, #div3 div, #div4 div{ width: 200px; height: 200px; border: 1px solid green; display: none; }
.active{ background: #c40000; }
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
/**
* 基于JQ的選項卡組件
* options：event delay
* methods：nowSel() 設置選項卡默認位置 getContent() 獲取當前所在選項卡對應的div中的內容
* events：beforeClick afterClick
*/
$(function(){
var t1 = new Tab();
t1.init('div1', {});
var t2 = new Tab();
t2.init('div2', {
event: 'mouseover'
});
var t3 = new Tab();
t3.init('div3', {
event: 'mouseover',
delay: 200 // 延遲200毫秒
});
var t4 = new Tab();
t4.init('div4', {});
t4.nowSel(2);
$('#input1').click(function () {
alert(t4.getContent());
});
// 切換之前觸發
$(t4).on('beforeClick', function () {
alert(t4.getContent());
});
// 切換之后觸發
$(t4).on('afterClick', function () {
alert(t4.getContent());
});
});
function Tab(){
this.oParent = null;
this.aInput = null;
this.aDiv = null;
this.iNow = 0;
this.settings = { // 默認參數
event: 'click',
delay: 0
};
}
Tab.prototype.init = function(oParent, opt){
$.extend(this.settings, opt);
this.oParent = $('#'+oParent);
this.aInput = this.oParent.find('input');
this.aDiv = this.oParent.find('div');
this.change();
};
Tab.prototype.change = function(){
var _this = this;
var timer = null;
this.aInput.on(this.settings.event, function () {
var obj = this;
if(_this.settings.event == 'mouseover' && _this.settings.delay){
timer = setTimeout(function () {
show(obj);
}, _this.settings.delay)
}else{
show(this);
}
}).on('mouseout', function(){
clearTimeout(timer);
});
function show(obj){
$(_this).trigger('beforeClick');
_this.aInput.attr('class', '');
_this.aDiv.css('display', 'none');
$(obj).attr('class', 'active');
_this.aDiv.eq($(obj).index()).css('display', 'block');
_this.iNow = $(obj).index();
$(_this).trigger('afterClick');
}
};
Tab.prototype.nowSel = function(index){
this.aInput.attr('class', '');
this.aDiv.css('display', 'none');
this.aInput.eq(index).attr('class', 'active');
this.aDiv.eq(index).css('display', 'block');
this.iNow = index;
};
Tab.prototype.getContent = function(){
return this.aDiv.eq(this.iNow).html();
};
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111111</div>
<div>222222</div>
<div>333333</div>
</div>
<div id="div2">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111111</div>
<div>222222</div>
<div>333333</div>
</div>
<div id="div3">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111111</div>
<div>222222</div>
<div>333333</div>
</div>
<div id="div4">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111111</div>
<div>222222</div>
<div>333333</div>
</div>
<input type="button" value="點擊" id="input1">
```
- 01 JS面向對象及組件開發
- 02 傳統的過程式編寫選項卡
- 03 用面向對象封裝通用選項卡
- 04 控制多個選項卡自動播放
- 05 用面向對象編寫拖拽
- 06 JS面向對象及組件開發
- 07 hasOwnProperty和constructor的使用
- 08 instanceof運算符的使用
- 09 利用toString做類型判斷
- 10 什么是面向對象的繼承
- 11 面向對象之拷貝繼承
- 12 編寫繼承的拖拽
- 13 繼承的其他形式之類式繼承
- 14 繼承的其他形式之原型繼承
- 15 組件開發是什么
- 16 給拖拽組件配置不同參數
- 17 封裝彈框組件
- 18 使用對象標記已彈出彈框
- 19 復雜組件開發之自定義事件
- 20 原生JS實現自定義事件
- 21 自定義事件實例
- 22 基于JQ的選項卡組件開發