,
clearUrl:
,
urlHashLocation:
,
bgColorDefault:
,
multiModule:
,
menuChildOpen:
,
loadingTime:
,
pageAnim:
,
miniAdmin.render(options);
在
index.html
文件内进行初始化
引入
lay-config.js
文件,请根据实际情况修改里面扩展的路径。
引入miniAdmin模块,根据需要传入初始化参数,执行
miniAdmin.render(options);
方法。
初始化api接口返回的参数可以参考
api目录下的init.json文件
或者查看使用说明的第二点的参数说明
layui.use(['jquery', 'layer', 'miniAdmin'], function () {
var $ = layui.jquery,
layer = layui.layer,
miniAdmin = layui.miniAdmin;
var options = {
iniUrl: "api/init.json",
clearUrl: "api/clear.json",
urlHashLocation: true,
bgColorDefault: 0,
multiModule: true,
menuChildOpen: false,
miniAdmin.render(options);
初始化api接口返回的参数说明
homeInfo
是首页信息
logoInfo
是logo信息
menuInfo
是头部模块和左侧菜单对应的信息
"homeInfo": {
"title": "首页",
"href": "page/welcome-1.html?t=1"
"logoInfo": {
"title": "LAYUI MINI",
"image": "images/logo.png",
"href": ""
"menuInfo": [
"title": "常规管理",
"icon": "fa fa-address-book",
"href": "",
"target": "_self",
"child":[...]
"title": "组件管理",
"icon": "fa fa-lemon-o",
"href": "",
"target": "_self",
"child":[...]
"title": "其它管理",
"icon": "fa fa-slideshare",
"href": "",
"target": "_self",
"child":[...]
缓存清理接口返回的参数说明
返回参数对应的事例(code:0,清除缓存失败;code:1,表示清除缓存成功;)
"code": 1,
"msg": "清除服务端缓存成功"
在页面中弹出新的Tab窗口(标签)
如需在页面中弹出新的Tab窗口,请参考下方代码。(备注:需要引入miniTab.js
文件)
参数说明(layuimini-content-href:页面链接,data-title:标题)
调用方法进行监听:miniTab.listen();
示例在page/welcome-1.html
页面中有
<a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" >基本资料</a>
layui.use(['form','miniTab'], function () {
var form = layui.form,
layer = layui.layer,
miniTab = layui.miniTab;
miniTab.listen();
在页面中弹出新的Tab窗口(JS方法)
如需在页面中弹出新的Tab窗口,请参考下方代码。(备注:需要引入miniTab.js
文件)
参数说明(href:页面链接,title:标题)
layui.use(['form','miniTab'], function () {
var form = layui.form,
layer = layui.layer,
miniTab = layui.miniTab;
miniTab.openNewTabByIframe({
href:"page/form.html",
title:"按钮示例",
在iframe页面中关闭当前Tab窗口
如需在iframe页面中,请参考下方代码。(备注:miniTab.js文件)
调用方法:miniTab.deleteCurrentByIframe();
示例在user-password.html
,user-setting.html
页面中都有
layui.use(['form','miniTab'], function () {
var form = layui.form,
layer = layui.layer,
miniTab = layui.miniTab;
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
layer.close(index);
miniTab.deleteCurrentByIframe();
return false;
后台主题方案配色
系统已内置12套主题配色,如果需要自定义皮肤配色,请在miniTheme.config
方法内按相同格式添加。
var bgColorConfig = [
headerRightBg: '#ffffff',
headerRightBgThis: '#e4e4e4',
headerRightColor: 'rgba(107, 107, 107, 0.7)',
headerRightChildColor: 'rgba(107, 107, 107, 0.7)',
headerRightColorThis: '#565656',
headerRightNavMore: 'rgba(160, 160, 160, 0.7)',
headerRightNavMoreBg: '#1E9FFF',
headerRightNavMoreColor: '#ffffff',
headerRightToolColor: '#565656',
headerLogoBg: '#192027',
headerLogoColor: 'rgb(191, 187, 187)',
leftMenuNavMore: 'rgb(191, 187, 187)',
leftMenuBg: '#28333E',
leftMenuBgThis: '#1E9FFF',
leftMenuChildBg: '#0c0f13',
leftMenuColor: 'rgb(191, 187, 187)',
leftMenuColorThis: '#ffffff',
tabActiveColor: '#1e9fff',
修改js后刷新页面未生效,请尝试清除浏览器缓存。
IIS环境下请配置支持解析.json
格式文件
菜单栏建议最多四级菜单,四级以后菜单显示并没有那么友好。