组件开发
Posted 蛋Mrs炒饭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件开发相关的知识，希望对你有一定的参考价值。
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>
以上是关于组件开发的主要内容，如果未能解决你的问题，请参考以下文章