组件开发之选项卡-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>

 

posted @ 2016-09-05 12:33  h5monkey  阅读(325)  评论(0)    收藏  举报