组件开发 

  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>

 

posted @ 2016-10-24 12:47  蛋Mrs炒饭  阅读(185)  评论(0)    收藏  举报