metisMenu.js動態側邊導航的實現(ajax動態渲染部分導航)
阿新 • • 發佈:2018-12-26
使用metisMenu.js實現後臺管理系統的導航,通過點選導航,切換不同的頁面內容。有些時候。我們需要動態新增頁面的內容,即通過ajax請求後臺來渲染部分導航的內容。
第一部分是靜態導航的實現,即通過點選導航切換右側頁面的實現。第二部分是動態渲染導航的實現。(demo例子來說明,樣式大家自己定義,核心程式碼部分)
metisMenu官網,大家可以自行下載:https://mm.onokumus.com/index.html(提示:需要在前面引入bootstrap和jquery)
一:靜態導航的實現。
1)html部分(css樣式自己根據需求定義)
<div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li> <a href="side.html" class="waves-effect">nochild</a></li> <li> <a href="#" class="waves-effect">導航管理 <span class="nav-caret"> <!-- 字型圖示 --> <i class="fa fa-caret-down"></i> </span></a> <ul class="nav nav-second-level"> <!-- 二級導航 --> <li><a href="side1.html">side1</a></li> <li><a href="side2.html">side2</a></li> </ul> </li> </ul> </div> </div>
2)js部分
$(function() { $('#side-menu').metisMenu(); urlchange() }) function urlchange() { //側邊欄根據url切換右邊內容頁面,根據自己的html來做修改 var url = window.location; var element = $('ul.nav a').filter(function () { return this.href == url || url.href.indexOf(this.href) == 0; }).addClass('active').parent().parent().addClass('in show').parent(); if (element.is('li')) { element.addClass('active'); } }
二:動態導航
html部分同上
js部分:(下面有json結構,可以根據自己的後臺返回資料格式更改ajax新增導航部分程式碼)
$(function () { $('#side-menu').metisMenu(); urlchange() $.ajax({ type: "get", url: './nav.json', success: function (data) { console.log(data) var sedlevel = '' var nav = ''; for (var i = 0; i < data.length; i++) { var sedlevel = ''; if (data[i].content) { for (var j = 0; j < data[i].content.length; j++) { sedlevel += `<li> <a dataId=${data[i].content[j].id} href="${data[i].content[j].url}">${data[i].content[j].name}</a> </li>` } } nav += `<li> <a href="javascript:void(0);" class="waves-effect"> <span class="nav-icon"> <i class="material-icons"> <span ui-include="'../assets/images/i_0.svg'"></span> </i> </span> ${data[i].name} <span class="nav-caret"> <i class="fa fa-caret-down"></i> </span> </a> <ul class="nav nav-second-level"> ${sedlevel} </ul> </li>` } $('#side-menu').metisMenu('dispose'); //參考https://mm.onokumus.com/mm-ajax.html,可以自己研究一下 $('#side-menu').append(nav); $('#side-menu').metisMenu(); urlchange() } }) }) function urlchange() { //側邊欄點選導航切換右側頁面,根據自己的html結構來修改 var url = window.location; var element = $('ul.nav a').filter(function () { return this.href == url || url.href.indexOf(this.href) == 0; }).addClass('active').parent().parent().addClass('in show').parent(); if (element.is('li')) { element.addClass('active'); } }
id作用不大,可以不返回。根據自己的需求定義(此處只是個demo小例子,具體還要看自己的需求是怎樣的)
[
{"id":1,"name":"內容管理","content":[{"id":"11","name":"內容頁面3","url":"side3.html"},{"id":"12","name":"內容頁面4","url":"side4.html"}]},
{"id":2,"name":"配置管理","content":[{"id":"13","name":"內容頁面5","url":"side5.html"},{"id":"14","name":"內容頁面5","url":"side6.html"}]}
]