JSON无限折叠菜单编写实例


Posted in Javascript onDecember 16, 2013

最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上左侧有分类是很常见的 或者说导航菜单有下拉效果也是很常见的,但是他们都是做死的 也就是页面上代码直接写死的 然后实现那种下拉效果 而今天我们是通过JSON格式来自动生成的,或者可以说 要做这种折叠菜单效果 只需要开发人员提供我们前端开发这种JSON格式或者我们前端可以定这样的格式也就ok了 其他的都可以直接引用这个代码进去。下面给大家来分享下我的JS代码!

下面我们来看看具体的效果如下:

JSON无限折叠菜单编写实例

下面我们来看看JSON个格式是个什么样的 格式如下:

var testMenu=[
    {
        "name": "一级菜单",
        "submenu": [
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "url": ""
            }
        ]
    },
    {
        "name": "一级菜单",
        "submenu": [
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "submenu": [
                    {
                        "name": "三级菜单",
                        "submenu": [
                            {
                                "name": "四级菜单",
                                "url": ""
                            }
                        ]
                    },
                    {
                        "name": "三级菜单",
                        "url": ""
                    }
                ]
            },
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "submenu": [
                    {
                        "name": "三级菜单",
                        "submenu": [
                            {
                                "name": "四级菜单",
                                "url": ""
                            },
                            {
                                "name": "四级菜单",
                                "submenu": [
                                    {
                                        "name": "五级菜单",
                                        "url": ""
                                    },
                                    {
                                        "name": "五级菜单",
                                        "url": ""
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "name": "三级菜单",
                        "url": ""
                    }
                ]
            },
            {
                "name": "二级菜单",
                "url": ""
            }
        ]
    },
    {
        "name": "一级菜单",
        "submenu": [
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "url": ""
            },
            {
                "name": "二级菜单",
                "url": ""
            }
        ]
    }
];

只要这种JSON格式就ok了 且上面的参数名 name submenu url是叫这样的名字就可以了 ,然后直接可以在页面HTML如下:
<div class="wrap-menu"></div>

CSS代码如下:
<style type="text/css">
    .wrap-menu { overflow:auto; width:300px; background:#F6F6F6; font:12px/1.5 Tahoma,Arial,sans-serif}
    .wrap-menu ul{ list-style:none; margin:0; padding:0;}
    .wrap-menu ul li{ text-indent:3em; white-space:nowrap; }
    .wrap-menu ul li h2{ cursor:pointer; height:100%; width:100%; margin:0 0 1px 0; font:12px/31px '宋体'; color:#fff; background:red;}
    .wrap-menu ul li a{ display:block; outline:none; height:25px; line-height:25px; margin:1px 0; color:#1A385C; text-decoration:none;}
    .wrap-menu ul li img{ margin-right:10px; margin-left:-17px; margin-top:9px; width:7px; height:7px; background:url(images/arrow.gif) no-repeat; border:none;}
    .wrap-menu ul li img.unfold{ background-position:0 -9px;}
    .wrap-menu ul li a:hover{ background-color:#ccc; background-image:none;}
  </style>

css样式可以自己下 没有关系!

JS代码如下:

/**
 * JSON无限折叠菜单
 * @constructor {AccordionMenu}
 * @param {options} 对象
 * @date 2013-12-13
 * @author tugenhua
 * @email 879083421@qq.com
 */
 function AccordionMenu(options) {
    this.config = {
        containerCls        : '.wrap-menu',                // 外层容器
        menuArrs            :  '',                         //  JSON传进来的数据
        type                :  'click',                    // 默认为click 也可以mouseover
        renderCallBack      :  null,                       // 渲染html结构后回调
        clickItemCallBack   : null                         // 每点击某一项时候回调
    };
    this.cache = {
    };
    this.init(options);
 }

 AccordionMenu.prototype = {
    constructor: AccordionMenu,
    init: function(options){
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        // 渲染html结构
        $(_config.containerCls).each(function(index,item){
            self._renderHTML(item);
            // 处理点击事件
            self._bindEnv(item);
        });
    },
    _renderHTML: function(container){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var ulhtml = $('<ul></ul>');
        $(_config.menuArrs).each(function(index,item){
            var lihtml = $('<li><h2>'+item.name+'</h2></li>');
            if(item.submenu && item.submenu.length > 0) {
                self._createSubMenu(item.submenu,lihtml);
            }
            $(ulhtml).append(lihtml);
        });
        $(container).append(ulhtml);
        _config.renderCallBack && $.isFunction(_config.renderCallBack) && _config.renderCallBack();
        // 处理层级缩进
        self._levelIndent(ulhtml);
    },
    /**
     * 创建子菜单
     * @param {array} 子菜单
     * @param {lihtml} li项
     */
    _createSubMenu: function(submenu,lihtml){
        var self = this,
            _config = self.config,
            _cache = self.cache;
        var subUl = $('<ul></ul>'),
            callee = arguments.callee,
            subLi;
        $(submenu).each(function(index,item){
            var url = item.url || 'javascript:void(0)';
            subLi = $('<li><a href="'+url+'">'+item.name+'</a></li>');
            if(item.submenu && item.submenu.length > 0) {
                $(subLi).children('a').prepend('<img src="images/blank.gif" alt=""/>');
                callee(item.submenu, subLi);
            }
            $(subUl).append(subLi);
        });
        $(lihtml).append(subUl);
    },
    /**
     * 处理层级缩进
     */
    _levelIndent: function(ulList){
        var self = this,
            _config = self.config,
            _cache = self.cache,
            callee = arguments.callee;
        var initTextIndent = 2,
            lev = 1,
            $oUl = $(ulList);
        while($oUl.find('ul').length > 0){
            initTextIndent = parseInt(initTextIndent,10) + 2 + 'em'; 
            $oUl.children().children('ul').addClass('lev-' + lev)
                        .children('li').css('text-indent', initTextIndent);
            $oUl = $oUl.children().children('ul');
            lev++;
        }
        $(ulList).find('ul').hide();
        $(ulList).find('ul:first').show();    
    },
    /**
     * 绑定事件
     */
    _bindEnv: function(container) {
        var self = this,
            _config = self.config;
        $('h2,a',container).unbind(_config.type);
        $('h2,a',container).bind(_config.type,function(e){
            if($(this).siblings('ul').length > 0) {
                $(this).siblings('ul').slideToggle('slow').end().children('img').toggleClass('unfold');
            }
            $(this).parent('li').siblings().find('ul').hide()
                   .end().find('img.unfold').removeClass('unfold');
            _config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this));
        });
    }
 };

代码初始化方式如下:
$(function(){
    new AccordionMenu({menuArrs:testMenu});
});

大家也可以自己定义上面的JSON格式 然后引用我的css JS 也可以实现自己想要的效果 如果css上有自己的风格 也可以改写css样式!切忌!JSON格式一定要和我上面的一样 且名字也要叫一样的 就ok!初始化 如上

new AccordionMenu({menuArrs:testMenu}); 其中testMenu 就是上面定义的JSON格式。

Javascript 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
javascript中的隐式调用
Feb 10 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
利用js动态添加删除table行的示例代码
Dec 16 #Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php精度计算的问题解析
2019/06/21 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
pandas 将索引值相加的方法
2018/11/15 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python3远程监控程序的实现方法
2019/07/15 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
.net工程师笔试题
2012/06/09 面试题
Ejb技术面试题
2015/04/29 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
公安机关起诉意见书
2015/05/20 职场文书