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>
关注web前端