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的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
js实现显示手机号码效果
Mar 09 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
React Native项目框架搭建的一些心得体会
May 28 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通用防注入程序 推荐
2011/02/26 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js星星评分效果
2014/07/24 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
详解vue axios中文文档
2017/09/12 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
iView框架问题整理小结
2018/10/16 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
2014年党支部承诺书
2014/05/30 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
护理培训心得体会
2016/01/22 职场文书
七年级数学教学反思
2016/02/17 职场文书