用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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
js中settimeout方法加参数
Feb 28 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
PHP安装全攻略:APACHE
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
js实现微信分享代码
2020/10/11 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python实现树形打印目录结构
2018/03/29 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
2015年学生会工作总结范文
2015/03/31 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang