标签:原来 lin find ons 框架搭建 scroll developer 系统初始化 sync
动态菜单
参考文章:https://cloud.tencent.com/developer/article/1342558
主要修改两个地方:
1.系统初始化加载一级菜单,在adminlte.js文件
$(window).on(‘load‘, function () { $.ajax({ url: "/Home/GetTree?id=0", type: "Post", timeout: 5000, async: true, dataType: "json", success: function (data) { if (data != null && data != undefined) { var leftTreeBox = $("#ModuleNav").empty(); leftTreeBox.append("<li class=\"header\">MAIN NAVIGATION</li>"); var treeHtml = ""; for (var i = 0; i < data.length; i++) { //if (i == 0) { // treeHtml += "<li class=\"active treeview\" name=" + data[i].parentId + " id="+data[i].id+"><a href=#" + data[i].id + "><i class=\"fa fa-heartbeat\"></i><span>" + data[i].text + "</span><span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a></li>"; //} //else { treeHtml += "<li class=\"treeview\" name=" + data[i].parentId + " id=" + data[i].id +"><a href=#" + data[i].id + "><i class=\"fa fa-heartbeat\"></i><span>" + data[i].text + "</span><span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a></li>"; //} } leftTreeBox.append(treeHtml); } else { console.log("菜单加载失败"); } }, error: function (error) { console.log("菜单加载失败:" + error); } }) $(Selector.data).each(function () { //原文 Plugin.call($(this)); }); });
2.加载二级菜单,在adminlte.js文件
// 判断该菜单是否是二级菜单如果是则添加选项卡 (2018-12-25 lzy add) Tree.prototype._setUpListeners = function () { var that = this;//获取树节点 $(this.element).on(‘click‘, this.options.trigger, function (event) { var ele = $(this); var id = ele.attr("href").substring(1, $(this).attr("href").length);//如果是一级菜单那么获取ID否则获取到节点的链接串为跳转页 //获取二级菜单 if (ele.parent().attr("name") == 0) { //赋予当前项选中样式,且菜单展开 ele.parent().addClass("active").siblings().removeClass("active"); that.toggle($(this), event); $.ajax({ url: "/Home/GetTree?id=" + encodeURI(id), type: "Post", timeout: 5000, async: true, dataType: "json", success: function (data) { if (data != null && data != undefined) { ele.parent().children(".treeview-menu").remove(); ele.parent().append("<ul class=\"treeview-menu menu-open\">"); var treeHtml = ""; for (var i = 0; i < data.length; i++) { treeHtml += "<li name=\"1\" id=" + data[i].id +"><a href=#" + data[i].value + "><i class=\"fa fa-circle-o\"></i>" + data[i].text + "</a></li>" } ele.parent().find(".treeview-menu").append(treeHtml); ele.parent().find(".treeview-menu").append("</ul>"); } else { console.log("菜单加载失败"); } return; }, error: function (error) { console.log("菜单加载失败:" + error); } }) }//添加选项卡调转 else if ($(this).parent().attr("name") == 1) { var tabId = ele.parent().attr("id"); var tabUrl = id; var tabName = ele.text(); //isCheckAddTab(tabId, tabUrl, tabName); addTabs({ "id": tabId, "title": tabName, "content": "", "url": tabUrl }); } //原来执行的函数 //that.toggle($(this), event); }); };
注:
bootstrap tab封装
var addTabs = function (obj) { var id = "tab_" + obj.id; var content = ""; $("#tabMain .active").removeClass("active"); $(".tab-content .active").removeClass("active"); //如果TAB不存在,创建一个新的TAB if (!$("#" + id)[0]) { //固定TAB中IFRAME高度 var mainHeight = $(document.body).height() - 95; //创建新TAB的title var title = ‘<li id="tab_‘ + id + ‘"><a href="#‘ + id + ‘" data-toggle="tab">‘ + obj.title; //是否允许关闭 if (obj.close) { title += ‘ <i class="icon-cancel3"tabclose="‘ + id + ‘"></i>‘; } title += ‘</a></li>‘; //是否指定TAB内容 if (obj.content) { content = ‘<div role="tabpanel"class="tab-pane"id="‘ + id + ‘">‘ + obj.content + ‘</div>‘; } else {//没有内容,使用IFRAME打开链接 content = ‘<div role="tabpanel" class="tab-pane" id="‘ + id + ‘"><iframe frameborder="0" src="‘ + obj.url + ‘" scrolling="auto" style="width:100%;height:‘ + mainHeight + ‘px;"></iframe></div>‘ } //加入TABS $("#tabMain").append(title); $("#tabContent").append(content); } //激活TAB $("#tab_" + id).addClass(‘active‘); $("#" + id).addClass("active"); };
标签:原来 lin find ons 框架搭建 scroll developer 系统初始化 sync
原文地址:https://www.cnblogs.com/newrohlzy/p/10206614.html