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语言中的Literal Syntax特性分析
Mar 08 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
React+Webpack快速上手指南(小结)
Aug 15 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
JavaScrip如果基于url实现图片下载
Jul 03 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
js事件(Event)知识整理
2012/10/11 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
Python对象类型及其运算方法(详解)
2017/07/05 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python实现梯度法 python最速下降法
2020/03/24 Python
营销专业应届生求职信
2013/11/26 职场文书
日语求职信范文
2013/12/17 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
实习指导老师评语
2014/04/26 职场文书
冰峪沟导游词
2015/02/09 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
git stash(储藏)的用法总结
2022/06/25 Servers
python缺失值填充方法示例代码
2022/12/24 Python