当前位置:  编程技术>WEB前端

jQuery 无限级菜单的简单实例

    来源: 互联网  发布时间:2014-08-25

    本文导语:  我将CSS完全分离出来用jQuery附加式样,就是为了多级染色,并且生成目录树和控制式样也很容易,生成时也不需要考虑式样。数据表建议用事先Order排序的方式,不要读取数据的时候才分级排序,这样性能会较佳。 我把它做成...

我将CSS完全分离出来用jQuery附加式样,就是为了多级染色,并且生成目录树和控制式样也很容易,生成时也不需要考虑式样。数据表建议用事先Order排序的方式,不要读取数据的时候才分级排序,这样性能会较佳。

我把它做成了个.Net的控件,作为轻量级的无限目录树,还是相当好用的。只是还不完善,我先慢慢修改,等差不多了再发布出来。

代码如下:




    jQuery 无限级菜单
   
    #menu a {
        color:#fff;
    }
    #menu div {
        /* text-align:center; */
    }
    #menu div a {
        padding-left:20px;
    }
    #menu div.root {
        display:block;
    }
    .list { background:url(/blog_article/list.gif) no-repeat 6px 6px; }
   
   
   
    $(function(){
        //颜色列表,如果想支持无限级,最好自动生成颜色列表,不过我的配色一项很差,用生成的就更惨不忍睹了……
        _cor = ['#003366', '#0066CC', '#3399FF', '#990000', '#CC0000', '#FF3300', '#FF9900', '#FFCC66', '#FFFFFF'];
        //初始化类
        (function Init(i,obj){
            i++;
            //查找子节点
            _obj = obj.children('div');
            //若有子节点,则增加一个专有式样
            if (_obj.length > 0)
                obj.addClass('list');
            $.each(_obj, function(j,o){
                //若是子目录则隐藏
                if (i > 0)
                    $(o).hide();
                //根据目录级数查找颜色字典上背景色,可改为图片什么的。
                $(o).css('background-color',_cor[i]);
                //查找子目录
                Init(i,$(o));
            });
        })(-1,$('#menu'));
    });
    //跳转链接
    function GotoURL(/blog_article/obj/index.html) {
        //若链接最末一位不是符号“#”则跳转链接,因为取href得到链接绝对路径,所以只能取最后一位,其实可以传值判断或生成目录树时不产生onclick都是可以的
        if (obj.href.substring(obj.href.length - 1, obj.href.length) != "#") return true;
        //拉出和缩进的特效
        $.each($(obj).parent().children('div'), function(i,o){
            $(o).slideToggle('slow');
        });
        return false;
    }
   

   




    
 
 

您可能感兴趣的文章:

  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jQuery实现CSS3动画效果的插件 jQuery Transit iis7站长之家
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery上下文菜单插件 jquery-simple-context-menu
  • jQuery菜单插件 Dmenu jQuery Plugin
  • jQuery下拉菜单插件 jQuery Simple Drop Down Menu
  • jQuery 下拉菜单插件 jQuery menu-aim
  • jquery下拉菜单效果 jquery点击弹出下拉菜单的例子
  • jQuery 菜单插件 jVanilla Menu
  • jQuery响应式侧栏菜单插件 sidr
  • jQuery树型菜单 MagicDTree
  • 抽屉式菜单 jQuery.mmenu
  • jQuery菜单插件 Superfish
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery无限滚动插件 AutoBrowse
  • Jquery 无限循环滚动公告的实现代码分享
  • jquery无限层级下拉菜单实现代码
  • JQuery异步加载无限下拉框级联功能实现示例
  • jquery 无限级下拉菜单的简单实现代码
  • jquery 无限分级的下拉菜单
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3