用jQuery扩展自写的 UI导航


Posted in Javascript onJanuary 13, 2010
(function($){ 
    $.navs=function(){ 
        return $('#top_menu_bar > li').each(function(){ 
            $(this).hover( 
                function(){ 
                    $(this).find('ul:eq(0)').show(); 
                }, 
                function(){ 
                    $(this).find('ul:eq(0)').hide(); 
                } 
            ); 
        }); 
    }; 
})(jQuery);

上面是直接定义属性。下面是种常见的方法:
jQuery.extend({ 
    navs:function(){ 
        return $('#top_menu_bar > li').each(function(){ 
            $(this).hover( 
                function(){ 
                    $(this).find('ul:eq(0)').show(); 
                }, 
                function(){ 
                    $(this).find('ul:eq(0)').hide(); 
                } 
            ); 
        }); 
    } 
});

调用测试下:
$.navs();
两年前的野心今天终于实现了(噢,这是导航,不是页签(tabs)),小有成就感一把!
Javascript 相关文章推荐
Javascript拓展String方法小结
Jul 08 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
ztree+ajax实现文件树下载功能
May 18 Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
JavaScript关于select的相关操作说明
Jan 13 #Javascript
海量经典的jQuery插件集合
Jan 12 #Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 #Javascript
jquery下操作HTML控件的实现代码
Jan 12 #Javascript
jquery插件 cluetip 关键词注释
Jan 12 #Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 #Javascript
You might like
yii框架builder、update、delete使用方法
2014/04/30 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP实现的策略模式示例
2019/03/20 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
原生JS实现留言板
2020/03/26 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
python控制台显示时钟的示例
2014/02/24 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
高一地理教学反思
2014/01/18 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
四风自我剖析材料
2014/09/30 职场文书
行政复议决定书
2015/06/24 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
修改并编译golang源码的操作步骤
2021/07/25 Golang
Java死锁的排查
2022/05/11 Java/Android