前言:
使用Layui-admin作後臺管理框架有很長的一段時間了,可是一直沒有對框架內iframe菜單欄切換跳轉作深刻的瞭解。今天有一個這樣的需求就是經過獲取超連接中傳遞過來的跳轉地址和對應的tabs的title名稱參數,在layui-admin-iframe中自動打開一個新的tabs頁面,不須要點擊左邊的菜單欄,實現一個單頁面的效果。javascript
代碼實現:
請求的超連接以下所示:
https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首頁html
其中transferUrl:爲須要打開的頁面地址java
openTabsName:爲tabs標題名稱框架
layui預先加載,獲取超連接中傳遞過來的跳轉頁面地址和tabs title名稱在iframe中打開:
//layui預先加載 layui.use('index', function(){ var transferUrl =getQueryVariable("tabName"); var openTabsName =getQueryVariable("name"); //初始化頁面調轉 layui.index.openTabsPage(transferUrl,openTabsName); })
Js獲取超連接裏面傳遞的參數值:
如獲取超連接[https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首頁] 中的transferUrl和openTabsName中的值 ui
function getQueryVariable(variable) { var query = window.location.search.substring(1); console.log(decodeURIComponent(query));//js解碼(超連接中的中文獲取時可能存在編碼的狀況) var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return decodeURIComponent(pair[1]);} } return(false); }
關於存在多了一級菜單欄,而連接中所帶的地址又不是第一個一級菜單欄中的子菜單欄咱們該如何解決初次加載顯示子級菜單欄問題?
咱們能夠在導航欄中設置左側菜單導航欄默認展開的屬性,以下所示:編碼
layui-nav-itemed的屬性默認導航所有展開 <li class="layui-nav-item layui-nav-itemed">
</li>
效果圖,以下所示:spa
原文出處:https://www.cnblogs.com/Can-daydayup/p/12598611.htmlcode