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


Posted in Javascript onMay 13, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
 <head>
     <title>选项卡插件制作</title>
 <style type="text/css">
     *{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>
 <script>
     (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>
 <div class="tab" id="testtab5">
     <div class="tabnav" id="tabtag5">
         <ul>
             <li class="cur">菜单一</li>
             <li>菜单二</li>
             <li>菜单三</li>
         </ul>
     </div>
     <div class="tabcon" id="tabcon5">
         <div class="tabcontent" style="display: block;">内容一</div>
         <div class="tabcontent">内容二</div>
         <div class="tabcontent">内容三</div>
     </div>
     <div style="clear: both;margin-top: 60px;">
         <div class="tab" id="testtab">
             <div class="tabnav" id="tabtag">
                 <ul>
                     <li class="cur">菜单一</li>
                     <li>菜单二</li>
                     <li>菜单三</li>
                 </ul>
             </div>
             <div class="tabcon" id="tabcon">
                 <div class="tabcontent" style="display: block;">内容一</div>
                 <div class="tabcontent">内容二</div>
                 <div class="tabcontent">内容三</div>
             </div>
     </div>
 </div>
   </div>
 </body>
 </html>
Javascript 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 #Javascript
怎么清空javascript数组
May 11 #Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 #Javascript
js运动框架_包括图片的淡入淡出效果
May 11 #Javascript
jQuery判断iframe中元素是否存在的方法
May 11 #Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 #Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 #Javascript
You might like
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
javascript学习之json入门
2016/12/22 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python实现下载整个ftp目录的方法
2017/01/17 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
如何用Python 加密文件
2020/09/10 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Linux如何为某个操作添加别名
2013/03/01 面试题
审计工作个人的自我评价
2013/12/25 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
顶岗实习接收函
2014/01/09 职场文书
学习十八大报告感言
2014/02/04 职场文书
晚会主持词开场白
2014/03/17 职场文书
庆国庆活动总结
2014/08/28 职场文书
父亲节寄语大全
2015/02/27 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏