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 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
javascript实现智能手环时间显示
Sep 18 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 array_intersect()函数使用代码
2009/01/14 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
简单了解JS打开url的方法
2020/02/21 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python 循环数据赋值实例
2019/12/02 Python
python实现计算图形面积
2021/02/22 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
考核评语大全
2014/04/29 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL