#基于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的选项卡组件开发