layui.config({
|
base: 'js/'
|
}).use(['element', 'layer', 'navbar', 'tab'], function() {
|
var element = layui.element()
|
$ = layui.jquery,
|
layer = layui.layer,
|
navbar = layui.navbar(),
|
tab = layui.tab({
|
elem: '.layout-nav-card', //设置选项卡容器
|
contextMenu:true
|
});
|
|
//iframe自适应
|
$(window).on('resize', function() {
|
var $content = $('.layout-nav-card .layui-tab-content');
|
$content.height($(this).height() - 165);
|
$content.find('iframe').each(function() {
|
$(this).height($content.height());
|
});
|
}).resize();
|
|
var $menu = $('#menu');
|
$menu.find('li.layui-nav-item').each(function() {
|
var $this = $(this);
|
//绑定一级导航的点击事件
|
$this.on('click', function() {
|
//获取设置的模块ID
|
var id = $this.find('a').data('module-id');
|
//这里的数据源只是演示时用的，实际需求可能通过远程读取（根据模块ID来获取对应模块的信息）
|
var url;
|
switch(id) {
|
case 1:
|
url = 'datas/nav_content.json';
|
break;
|
case 3:
|
url = 'datas/nav_member.json';
|
break;
|
default:
|
break;
|
}
|
//设置数据源有两个方式。
|
//第一：在此页面通过ajax读取设置 举个栗子：
|
//---------这是第一个栗子----------
|
/*$.getJSON('/api/xxx',{moduleId:id},function(data){
|
navbar.set({
|
elem: '#side',
|
data: data
|
});
|
navbar.render();
|
navbar.on('click(side)', function(data) {
|
tab.tabAdd(data.field);
|
});
|
});*/
|
//------------栗子结束--------------
|
//第二：设置url
|
//---------这是第二个栗子----------
|
/*navbar.set({
|
elem: '#side',
|
url: '/api/xxx?moduleId='+id
|
});
|
navbar.render();
|
navbar.on('click(side)', function(data) {
|
tab.tabAdd(data.field);
|
});*/
|
//------------栗子结束--------------
|
|
//设置navbar
|
navbar.set({
|
elem: '#side', //存在navbar数据的容器ID
|
url: url
|
});
|
//渲染navbar
|
navbar.render();
|
//监听点击事件
|
navbar.on('click(side)', function(data) {
|
layer.msg(data.field.href);
|
tab.tabAdd(data.field);
|
});
|
});
|
|
});
|
//模拟点击内容管理
|
$('.beg-layout-menu').find('a[data-module-id=1]').click();
|
|
element.on('nav(user)', function(data) {
|
var $a = data.children('a');
|
if($a.data('tab') !== undefined && $a.data('tab')) {
|
tab.tabAdd({
|
title: $a.children('cite').text(),
|
//icon: 'fa-user',
|
href: $a.data('url')
|
});
|
}
|
});
|
|
$('.beg-layout-side-toggle').on('click', function() {
|
var sideWidth = $('.beg-layout-side').width();
|
if(sideWidth === 200) {
|
$('.beg-layout-body').animate({
|
left: '0'
|
});
|
$('.beg-layout-footer').animate({
|
left: '0'
|
});
|
$('.beg-layout-side').animate({
|
width: '0'
|
});
|
} else {
|
$('.beg-layout-body').animate({
|
left: '200px'
|
});
|
$('.beg-layout-footer').animate({
|
left: '200px'
|
});
|
$('.beg-layout-side').animate({
|
width: '200px'
|
});
|
}
|
});
|
});
|
