用jQuery扩展自写的 UI导航

  作者:bea

代码如下: (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);

代码如下:


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


有用  |  无用

猜你喜欢