1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1 div,#div2 div,#div3 div,#div4 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
8 .active{ background:red;}
9 </style>
10 <script src="jquery-1.10.2.min.js"></script>
11 <script>
12
13 /**
14 title : 基于JQ的选项卡组件
15
16 Options : event delay
17
18 Methods : nowSel() getContent()
19
20 Events : beforeClick afterClick
21
22 */
23
24 //jQ中的主动触发 : trigger()
25
26 $(function(){
27
28 var t1 = new Tab();
29 t1.init('div1',{});
30
31 var t2 = new Tab();
32 t2.init('div2',{
33 event : 'mouseover'
34 });
35
36 var t3 = new Tab();
37 t3.init('div3',{
38 event : 'mouseover',
39 delay : 200
40 });
41
42 var t4 = new Tab();
43 t4.init('div4',{});
44 t4.nowSel(2);
45
46 $('#input1').click(function(){
47
48 alert( t4.getContent() );
49
50 });
51
52 $(t4).on('beforeClick',function(){
53 alert( t4.getContent() );
54 });
55
56 $(t4).on('afterClick',function(){
57 alert( t4.getContent() );
58 });
59
60 });
61
62 function Tab(){
63
64 this.oParent = null;
65 this.aInput = null;
66 this.aDiv = null;
67 this.iNow = 0;
68
69 this.settings = { //默认参数
70 event : 'click',
71 delay : 0
72 };
73 }
74
75 Tab.prototype.init = function(oParent , opt){
76
77 $.extend( this.settings , opt );
78
79 this.oParent = $('#'+oParent);
80 this.aInput = this.oParent.find('input');
81 this.aDiv = this.oParent.find('div');
82
83 this.change();
84
85 };
86 Tab.prototype.change = function(){
87
88 var This = this;
89 var timer = null;
90
91 this.aInput.on(this.settings.event,function(){
92
93 var _this = this;
94
95 if( This.settings.event == 'mouseover' && This.settings.delay ){
96
97 timer = setTimeout(function(){
98 show(_this);
99 },This.settings.delay);
100
101 }
102 else{
103 show(this);
104 }
105
106 }).mouseout(function(){
107 clearTimeout(timer);
108 });
109
110 function show(obj){
111
112 $(This).trigger('beforeClick');
113
114 This.aInput.attr('class','');
115 This.aDiv.css('display','none');
116
117 $(obj).attr('class','active');
118
119 This.aDiv.eq( $(obj).index() ).css('display','block');
120
121 This.iNow = $(obj).index();
122
123 $(This).trigger('afterClick');
124
125 }
126
127 };
128
129 Tab.prototype.nowSel = function(index){
130
131 this.aInput.attr('class','');
132 this.aDiv.css('display','none');
133
134 this.aInput.eq(index).attr('class','active');
135 this.aDiv.eq(index).css('display','block');
136
137 this.iNow = index;
138
139 };
140
141 Tab.prototype.getContent = function(){
142
143 return this.aDiv.eq(this.iNow).html();
144
145 };
146
147
148 </script>
149 </head>
150
151 <body>
152 <div id="div1">
153 <input class="active" type="button" value="1">
154 <input type="button" value="2">
155 <input type="button" value="3">
156 <div style="display:block">111111</div>
157 <div>222222</div>
158 <div>333333</div>
159 </div>
160
161 <div id="div2">
162 <input class="active" type="button" value="1">
163 <input type="button" value="2">
164 <input type="button" value="3">
165 <div style="display:block">111111</div>
166 <div>222222</div>
167 <div>333333</div>
168 </div>
169
170 <div id="div3">
171 <input class="active" type="button" value="1">
172 <input type="button" value="2">
173 <input type="button" value="3">
174 <div style="display:block">111111</div>
175 <div>222222</div>
176 <div>333333</div>
177 </div>
178
179 <div id="div4">
180 <input class="active" type="button" value="1">
181 <input type="button" value="2">
182 <input type="button" value="3">
183 <div style="display:block">111111</div>
184 <div>222222</div>
185 <div>333333</div>
186 </div>
187 <input type="button" value="点击" id="input1">
188 </body>
189 </html>
