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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
javascript中Function类型详解
2015/04/28 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python多进程并行代码实例
2019/09/30 Python
python爬虫容易学吗
2020/06/02 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
小学生安全演讲稿
2014/04/25 职场文书
小学语文课后反思精选
2014/04/25 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python