首页 > 代码库 > 组件开发之选项卡-1
组件开发之选项卡-1
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>
组件开发之选项卡-1
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。