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 同时提交多个Web表单的方法
Feb 19 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
Position属性之relative用法
Dec 14 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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 采集获取指定网址的内容
2010/01/05 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
php swoft框架实例用法
2020/12/22 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python中set()函数简介及实例解析
2018/01/09 Python
python+flask实现API的方法
2018/11/21 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Keras搭建自编码器操作
2020/07/03 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
清洁工表扬信
2014/01/08 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
食堂卫生管理制度
2015/08/04 职场文书
病房管理制度范本
2015/08/06 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java基于字符界面的简易收银台
2021/06/26 Java/Android