1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
8 <style type="text/css">
9 #div1 div,
10 #div2 div,
11 #div3 div {
12 width: 200px;
13 height: 200px;
14 border: 1px solid #000000;
15 display: none;
16 }
17
18 input {
19 border: none;
20 outline: none;
21 background: yellowgreen;
22 }
23
24 .active {
25 background: pink;
26 }
27 </style>
28 </head>
29
30 <body>
31 <div id="div1">
32 <input type="button" class="active" value="1" />
33 <input type="button" value="2" />
34 <input type="button" value="3" />
35 <div style="display: block;">1111111</div>
36 <div>2222222</div>
37 <div>3333333</div>
38 </div>
39 <div id="div2">
40 <input type="button" class="active" value="1" />
41 <input type="button" value="2" />
42 <input type="button" value="3" />
43 <div style="display: block;">1111111</div>
44 <div>2222222</div>
45 <div>3333333</div>
46 </div>
47 <div id="div3">
48 <input type="button" class="active" value="1" />
49 <input type="button" value="2" />
50 <input type="button" value="3" />
51 <div style="display: block;">1111111</div>
52 <div>2222222</div>
53 <div>3333333</div>
54 </div>
55 <script type="text/javascript">
56 /**
57 * title: 基于jq选项卡组件
58 * options：events deplay
59 */
60 $(function() {
61 var t1 = new Tab()
62 t1.init("div1", {})
63 var t2 = new Tab()
64 t2.init("div2", { //配置参数
65 event: "mouseover"
66
67 })
68 var t3 = new Tab()
69 t3.init("div3", { //配置参数
70 event: "mouseover",
71 delay: 200
72 })
73 });
74
75 function Tab() {
76 this.oparent = null;
77 this.ainput = null;
78 this.div = null;
79 this.settings = { //默认参数
80 event: "click",
81 delay: 0
82 }
83 }
84 Tab.prototype.init = function(oparent, opt) {
85 $.extend(this.settings, opt); //复制
86 this.oparent = $("#" + oparent);
87 this.ainput = this.oparent.find("input");
88 this.div = this.oparent.find("div");
89 this.change(); //选项卡改变事件
90 };
91
92 Tab.prototype.change = function() {
93 var This = this; //改变this指向 很重要
94 var timer = null;
95 this.ainput.on(this.settings.event, function() {
96 var _this = this;
97 if(This.settings.event = "mouseover" && This.settings.delay) {
98 timer = setTimeout(function() {
99 show(_this)
100 }, This.settings.delay);
101 } else {
102 show(this);
103 }
104 }).mouseout(function() {
105 clearTimeout(timer);
106 });
107
108 function show(obj) {
109 This.ainput.attr("class", "");
110 This.div.css("display", "none");
111 $(obj).attr("class", "active"); //封装后 $(this)--->$(obj)
112 This.div.eq($(obj).index()).css("display", "block");
113 }
114
115 }
116 </script>
117 </body>
118
119 </html>
