使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解。今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tabs的title名称参数,在layui-admin-iframe中自动打开一个新的tabs页面,不需要点击左边的菜单栏,实现一个单页面的效果。
https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页 其中transferUrl:为需要打开的页面地址 openTabsName:为tabs标题名称
//layui预先加载
layui.use('index', function(){
var transferUrl =getQueryVariable("tabName");
var openTabsName =getQueryVariable("name");
//初始化页面调转
layui.index.openTabsPage(transferUrl,openTabsName);
})
如获取超链接[https://xxxx.xxx.com?transferUrl=/Home/Index&openTabsName=首页] 中的transferUrl和openTabsName中的值
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>
效果图,如下所示: