jq选项卡鼠标延迟的插件

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
 6 <head>
 7     <title>选项卡插件制作</title>
 8 <style type="text/css">
 9     *{margin: 0;padding: 0}
10     .tab{width: 350px;margin: 100px auto;}
11     .tabnav li{ list-style:none;cursor:pointer;float: left;width: 80px;border: 1px solid #ccc;border-radius: 5px;margin-right: 5px; height:24px;line-height: 24px;text-align: center;}
12     .tabnav li.cur{background:#daa520;}
13     .tabcontent{display: none;padding: 20px;}
14     .tabcon{border: 1px #708090 solid;background: #ffc0cb;height: 300px;clear: both;}
15 </style>
16 </head>
17 <script>
18     (function($){
19         $.fn.extend({
20             myTab:function(options){
21                  var confings={
22                      tabNav:'',//tab导航名称
23                      tabTag:'',//tab导航标签
24                      tabCon:'',//tab内容名称
25                      conTag:'',//tab内容标签和其他的类名
26                      method: 'click'//鼠标事件状态
27                  };//默认设置
28                 options= $.extend(confings,options);
29                 var that=$(this);
30                 var tagnav=$(confings.tabNav);
31                 var tabLi=tagnav.find(confings.tabTag);
32                 var tabcon=$(confings.tabCon);
33                 var tabUl=tabcon.find(confings.conTag);
34                 var timoutid=null;
35                 tabLi.each(function(ind){
36                     $(this).bind(options.method,function(){
37                         var liNode = $(this);
38                         timoutid = setTimeout(function(){ //鼠标不小心划过的延迟时间
39                             tabUl.hide();
40                             tabLi.removeClass("cur");
41                             tabUl.eq(ind).show();
42                             liNode.addClass("cur");
43                         },300);
44                     }).mouseout(function(){
45                                 clearTimeout(timoutid);
46                             });
47 
48                 })
49                 return this;
50             }
51         })
52 
53     })(jQuery);
54     $(function(){
55 
56         $("#testtab5").myTab({
57             tabNav:"#tabtag5",tabTag:"li",tabCon:"#tabcon5",conTag:".tabcontent",method:"mouseover"
58         });
59         $("#testtab").myTab({
60             tabNav:"#tabtag",tabTag:"li",tabCon:"#tabcon",conTag:".tabcontent"
61         });
62 
63     })
64 </script>
65 <body>
66 <div class="tab" id="testtab5">
67     <div class="tabnav" id="tabtag5">
68         <ul>
69             <li class="cur">菜单一</li>
70             <li>菜单二</li>
71             <li>菜单三</li>
72         </ul>
73     </div>
74     <div class="tabcon" id="tabcon5">
75         <div class="tabcontent" style="display: block;">内容一</div>
76         <div class="tabcontent">内容二</div>
77         <div class="tabcontent">内容三</div>
78     </div>
79     <div style="clear: both;margin-top: 60px;">
80         <div class="tab" id="testtab">
81             <div class="tabnav" id="tabtag">
82                 <ul>
83                     <li class="cur">菜单一</li>
84                     <li>菜单二</li>
85                     <li>菜单三</li>
86                 </ul>
87             </div>
88             <div class="tabcon" id="tabcon">
89                 <div class="tabcontent" style="display: block;">内容一</div>
90                 <div class="tabcontent">内容二</div>
91                 <div class="tabcontent">内容三</div>
92             </div>
93     </div>
94 </div>
95   </div>
96 </body>
97 </html>
在线预览：http://jsbin.com/oqamer/1
posted on 2013-05-12 22:19 仙梦之飘阅读(212) 评论(0) 编辑收藏举报