《前端》引用包sidebar-menu.js源码及使用

sidebar-menu.js源码：

(function ($) {$.fn.sidebarMenu = function (options) {options = $.extend({}, $.fn.sidebarMenu.defaults, options || {});var target = $(this);target.addClass('nav');target.addClass('nav-list');if (options.data) {init(target, options.data);}else {if (!options.url) return;$.getJSON(options.url, options.param, function (data) {init(target, data);});}var url = window.location.pathname;//menu = target.find("[href='" + url + "']");//menu.parent().addClass('active');//menu.parent().parentsUntil('.nav-list', 'li').addClass('active').addClass('open');function init(target, data) {$.each(data, function (i, item) {var li = $('<li id=\'menu_li_'+item.id+'\'></li>');var a = $('<a></a>');var icon = $('<i></i>');//icon.addClass('glyphicon');icon.addClass(item.icon);var text = $('<span></span>');text.addClass('menu-text').text(item.text);a.append(icon);a.append(text);if (item.menus&&item.menus.length>0) {a.attr('href', '#');a.addClass('dropdown-toggle');var arrow = $('<b></b>');arrow.addClass('arrow').addClass('icon-angle-down');a.append(arrow);li.append(a);var menus = $('<ul></ul>');menus.addClass('submenu');init(menus, item.menus);li.append(menus);}else {if(item.close == undefined) item.close = true;var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: ' + item.close + ',url: \'' + item.url + '\'});';a.attr('href', href);//if (item.istab)// a.attr('href', href);//else {// a.attr('href', item.url);// a.attr('title', item.text);// a.attr('target', '_blank')//}li.append(a);}target.append(li);});}}$.fn.sidebarMenu.defaults = {url: null,param: null,data: null};
})(jQuery);

使用案例：

html：

 <div class="sidebar" id="sidebar"><ul class="nav nav-list" id="menu"></ul></div>

自己的js：

    $('#menu').sidebarMenu({data : menuArr});

《前端》引用包sidebar-menu.js源码及使用相关推荐

js define函数_不夸张，这真的是前端圈宝藏书！360前端工程师Vue.js源码解析
优秀源代码背后的思想是永恒的.普适的. 这些年来,前端行业一直在飞速发展.行业的进步,导致对从业人员的要求不断攀升.放眼未来,虽然仅仅会用某些框架还可以找到工作,但仅仅满足于会用,一定无法走得更远.随 ...
【Vue.js源码解析一】-- 响应式原理
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读课程目标 Vue.js 的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理 – 最核心的特性之一准备工作 ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
Evil.js源码解读
https://github.com/duo001/evil.js 火爆全网的 Evil.js 源码解读火爆全网的 Evil.js 源码解读什么?黑心996公司要让你提桶跑路了? 想在离开前给你们 ...
ElasticSearch.js源码走一个大概
介绍 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 L ...
易启秀20150629完整包微场景制作源码,新增1.4G素材包,全新后台UI设计+采集
易启秀20150629完整包微场景制作源码,新增1.4G素材包,全新后台UI设计+采集本文由穷站长于 2015-7-18 9:23 Saturday 发布在 php源码评论(46) 最新版易启 ...
Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 响应式原理
文章目录一.准备工作 1.1 Vue 源码的获取 1.2 源目录结构 1.3 了解 Flow 1.4 调试设置 1.5 Vue 的不同构建版本 1.6 寻找入口文件 1.7 从入口开始二.Vue ...
补环境：vm2 transformer.js 源码分析
在补环境框架的文件夹里执行 vm2 文件能成功得到结果,但是将合并了环境和原 js 文件后的代码内容单独提取出来通过 vm2 调用却报错提示 SyntaxError: Use of internal ...
video.js 源码解析
为什么80%的码农都做不了架构师?>>> 写在前面现在视频业务越来越流行了,播放器也比较多,作为前端工程师如何打造一个属于自己的播放器呢?最快最有效的方式是基于开源播放器深度 ...

《前端》引用包sidebar-menu.js源码及使用

《前端》引用包sidebar-menu.js源码及使用相关推荐

最新文章

热门文章