用jQuery扩展自写的 UI导航_jquery

复制代码 代码如下:

(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)),小有成就感一把!

时间: 2024-10-12 10:09:28

用jQuery扩展自写的 UI导航_jquery的相关文章

基于jquery扩展漂亮的CheckBox(自己编写)_jquery

大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度.今天跟大家一起分享前一段时间自己编写的CheckBox控件.喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言.废话不多说,切入正题. Html部分代码如下: 复制代码 代码如下: <b class="combox"></b> Css部分代码如下: 复制代码 代码如下: .combox{float:left;background:url(/img/Icon_BG.png);} .c

jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】_jquery

本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL

jQuery实现类似标签风格的导航菜单效果代码_jquery

本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引入了jquery,若运行代码后左上角提示错误,刷新页面即可正常.你可点击菜单查看到整体的效果.点击后对应菜单项下移,可扩展成二级菜单,也可以改成TAB标签布局,感兴趣的朋友自己研究吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bq-style-nav-menu-co

jquery 仿淘宝商城左侧导航效果代码

jquery 仿淘宝商城左侧导航效果代码 <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.111cn.net"> <html>     <head>         <meta http-equiv="content-type" content= "text/html; charset=utf-8">  

jQuery实现可展开折叠的导航效果示例_jquery

本文实例讲述了jQuery实现可展开折叠的导航效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0;} li{ list-style-type: none;}

jQuery简单实现仿京东分类导航层效果_jquery

本文实例讲述了jQuery简单实现仿京东分类导航层效果.分享给大家供大家参考,具体如下: <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var alink01 = $(".item > ul"); al

jQuery+css实现非常漂亮的水平导航菜单效果_jquery

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

jQuery插件扩展extend的简单实现原理_jquery

相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {

jQuery实现简单的列表式导航菜单效果代码_jquery

本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h