<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JQ选项卡</title>
<style>
#div1 div,
#div2 div,
#div3 div,
#div4 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<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">
</body>
<script type="text/javascript">
/**
title : 基于JQ的选项卡组件
Options : event delay
Methods : nowSel() getContent()
Events : beforeClick afterClick
**/
//jQ中的主动触发 : trigger()
$(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
});
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.oInput = null;
this.oDiv = null;
this.isNow = 0;
this.settings = { //默认参数
event: "click",
delay: 0
};
};
Tab.prototype.init = function(oParent, opt) {
$.extend(true, 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 time = null;
this.aInput.on(this.settings.event, function() {
var _this = this;
if(This.settings.event == "mouseover" && This.settings.delay) {
time = setTimeout(function() {
show(_this);
}, This.settings.delay);
} else {
show(_this);
}
}).mouseout(function() {
clearTimeout(time);
});
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>
</html>
