管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jq选项卡鼠标延迟的插件实例

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

　　"http://www.w3.org/TR/html4/loose.dtd">

　　<html>

　　<head>

　　<title>选项卡插件制作</title>

　　*{margin: 0;padding: 0}

　　.tab{width: 350px;margin: 100px auto;}

　　.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;}

　　.tabnav li.cur{background:#daa520;}

　　.tabcontent{display: none;padding: 20px;}

　　.tabcon{border: 1px #708090 solid;background: #ffc0cb;height: 300px;clear: both;}

　　</style>

　　</head>

　　(function($){

　　$.fn.extend({

　　myTab:function(options){

　　var confings={

　　tabNav:'',//tab导航名称

　　tabTag:'',//tab导航标签

　　tabCon:'',//tab内容名称

　　conTag:'',//tab内容标签和其他的类名

　　method: 'click'//鼠标事件状态

　　};//默认设置

　　options= $.extend(confings,options);

　　var that=$(this);

　　var tagnav=$(confings.tabNav);

　　var tabLi=tagnav.find(confings.tabTag);

　　var tabcon=$(confings.tabCon);

　　var tabUl=tabcon.find(confings.conTag);

　　var timoutid=null;

　　tabLi.each(function(ind){

　　$(this).bind(options.method,function(){

　　var liNode = $(this);

　　timoutid = setTimeout(function(){ //鼠标不小心划过的延迟时间

　　tabUl.hide();

　　tabLi.removeClass("cur");

　　tabUl.eq(ind).show();

　　liNode.addClass("cur");

　　},300);

　　}).mouseout(function(){

　　clearTimeout(timoutid);

　　});

　　})

　　return this;

　　}

　　})

　　})(jQuery);

　　$(function(){

　　$("#testtab5").myTab({

　　tabNav:"#tabtag5",tabTag:"li",tabCon:"#tabcon5",conTag:".tabcontent",method:"mouseover"

　　});

　　$("#testtab").myTab({

　　tabNav:"#tabtag",tabTag:"li",tabCon:"#tabcon",conTag:".tabcontent"

　　});

　　})

　　</script>

　　<body>

　　<ul>

　　</ul>

　　</div>

　　</div>

　　<ul>

　　</ul>

　　</div>

　　</div>

　　</body>

　　</html>

教程首页更多教程