用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实时监听文本框状态的方法
Apr 26 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
js实现转动骰子模型
Oct 24 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
详解Node.js如何处理ES6模块
May 15 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
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
微信API接口大全
2015/04/15 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
Jquery 设置标题的自动翻转
2009/10/03 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
最新pycharm安装教程
2020/11/18 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
2014年转正工作总结
2014/11/08 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL