🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## **layui_zqadmin.js使用说明** **(可支持无限级菜单)** 码云仓库:[https://gitee.com/zhqings/zqadmin](https://gitee.com/zhqings/zqadmin) ~~~ /** * 此数据可以放在url参数上测试 ,url地址填写数组只是调试使用 * id 唯一标识 * pid 上级id 顶级菜单为0 * title 菜单名称 * classname 加入类名 layui-hide-xs(只在电脑显示) layui-hide-sm(只在手机显示) layui-nav-itemed(展开菜单) * mode 访问模式 点击方式(iframe ajax id class onclick) 默认ajax * access 根据mode来填写(事件名称或者url地址) * iconclass 菜单图标,为空侧按icon设置的多级图标来显示 */ var data = [{ "id": 1, "pid": 0, "title": "一级菜单", "classname": "", "mode": "", "iconclass": "", "access": "" }, { "id": 2, "pid": 1, "title": "二级级单", "classname": "", "mode": "", "iconclass": "", "access": "" }, { "id": 3, "pid": 2, "title": "三级菜单", "classname": "", "mode": "", "iconclass": "", "access": "" }, { "id": 4, "pid": 3, "title": "四级菜单", "classname": "", "mode": "ajax", "iconclass": "", "access": "" }, { "id": 5, "pid": 4, "title": "五级菜单", "classname": "", "mode": "", "iconclass": "", "access": "" }, { "id": 6, "pid": 5, "title": "使用文档", "classname": "", "mode": "iframe", "iconclass": "", "access": "https://www.kancloud.cn/zhqing/zqphp2/1758440" }]; /** * 加载后台: layui.zqadmin.render(对像参数); * 加载完成后可使用以下方法 * 打开页面: layui.zqadmin.openurl(访问地址,访问方式(iframe,ajax),名称,窗口标识) 窗口标识默认主页 * 刷新页面: layui.zqadmin.refresh(); //内容页 * 加载菜单: layui.zqadmin.loadmenu({key:'zq'}); //可带请求参数 可扩顶部加载不同的菜单 * 触发锁屏: layui.zqadmin.lock(); //触发锁屏 * 触发解锁: layui.zqadmin.unlock(密码); //参数为密码,密码正常可解锁 * 页面信息: layui.zqadmin.webmain(); //获取当前页面信息{访问地址,访问方式,名称,窗口标识,内容区id}等 * 容器 id: layui.zqadmin.mainid(); //内容区最大的容器 id * 容器 id: layui.zqadmin.bodyid(); //当前内容页容器id * 容器 id: layui.zqadmin.uid(); //导航id窗口唯一标识 * 事件选择器: layui.zqadmin.$('#dom'); //jq 选择器请使用$ 这样ajax多窗口js问题就可以解决也可以使用 layui.zq.dom('#dom') * 打开窗口标签: 只要加上zqopen属性就行 例 <div access='打开的地址' title='名称' mode='模式' uid='唯一标识)' zqopen>点击打开</div> * 打开窗口标签也可以通过类名打开openmain重复无法打开窗口,推荐使用英文,因为左侧导航的唯一标识是id * layui.zqadmin.leftmenu(bool); bool=true显示左侧菜单 ,bool=false隐藏左侧菜单 */ layui.zqadmin.render({ //[必选]string 数据请求地址 或者array 菜单数据(array数据,查询功能要自己重写search参数) url: '/json/menu.json', //[可选]string zqadmin数据请求类型 默认POST type: 'GET', //[可选]object 菜单默认请求参数 data: {}, //[可选]siting|DOM 容器名或者DOM(默认body) elem: 'body', //[可选]array|string 主页地址[地址,打开类型(iframe ajax),主页图标,主页名称] 打开类型默认ajax 为空不显示主页 home: ['https://www.kancloud.cn/zhqing/zqphp2/1758440', 'iframe'], //[可选]bool 有下级菜单的菜单是否允许点击打开窗口,默认false不允许(id class onclick)这三个是允许的 open: false, //[可选]bool 多窗口时换窗口是否刷新 默认false不刷新 refresh: false, //[可选]bool 是否关闭多窗口模式 默认false mode: false, //[可选]bool 是否开启选项卡图标 tabicon: true, //[可选]number 多窗口模式打开数量默认10 amount: 20, //[可选]number 小于此宽度进入移动端模式 默认720 width: 720, //[可选]bool 移动端模式是否关闭左下角图标 默认false move: false, //[可选]bool 是否开启地址显示 默认关闭 // 地址、[可选]模式ajax/iframe(默认iframe)、[可选]名称 // 例:http://baidu.com|iframe|百度 hash: false, //[可选]string 地址显示分隔符 默认“|” sign: '|', //[可选]array 导航多级图标默认设置array[图标使用关角逗号分开,最后一级图标] 如最后一级图标没有设置,则默认多级图标的最后一个 icon: ['layui-icon-heart-fill,layui-icon-ios', 'layui-icon-wifi'], //[可选]bool 是否关闭顶部刷新加载按钮 默认false load: false, //[可选]function|string 添加内容到顶部左边 left: function () { return '<li class="layui-nav-item"><a href="javascript:;">测试</a></li>'; }, //[可选]function|string 添加内容到顶部右边 right: function () { return '<li class="layui-nav-item layui-this">\n' + ' <a href="javascript:;">产品</a>\n' + ' <dl class="layui-nav-child">\n' + ' <dd><a href="javascript:;">选项1</a></dd>\n' + ' <dd><a href="javascript:;" class="openmain" access=\'http://taobao.com\' title=\'淘宝\' mode=\'iframe\' uid=\'taobao\'>类名打开淘宝</a></dd>\n' + ' <dd><a href="javascript:;" access=\'http://baidu.com\' title=\'百度\' mode=\'iframe\' uid=\'baidu\' zqopen>属性打开百度</a></dd>\n' + ' </dl>\n' + ' </li>'; }, //[可选]function|string 菜单查询[方法(表单输入对像,按钮对像)]返回false停止查找 objact开始查找 ,为空不显示查找 //string 使用zq内部方法查询,string为提交字段名 search: function (input, button) { console.log('表单对像:' + input); console.log('按钮对像:' + button); return {key: input.val()}; }, //[可选]function|string 点击锁屏时回调的方法[锁屏方法] 为空不显示锁屏按钮 //[可选]string 为数据地址 使用zq内部方法 返回json格式 {code:1,data:'成功锁屏'} {code:0,data:'未知错误'} code为0则提示data内容 lock: function (way) { console.log('你点击了锁屏'); way();//锁屏方法 }, //[可选]function 加载时是否要屏屏[锁屏方法] 有设置锁屏此方法一定要设置 //[可选]string 为数据地址 返回json格式 {code:1,data:'锁屏'} 只有code=1时才锁屏,0不提示 islock: function (way) { console.log('判断是否锁屏'); //way();//锁屏方法 }, //[可选]function|string 点击解锁时的方法[输入的密码,解锁方法] 有设置锁屏此方法一定要设置 或者string可为数据地址 //[可选]string 为数据地址 使用zq内部方法 提交字段名:password 返回json格式 {code:1,data:'成功'} {code:0,data:'未知错误'} code为0则提示data内容 unlock: function (pwd, way) { console.log('输入密码:' + pwd); way();//解锁会重加载左侧菜单和刷新内容页 }, //[可选]function|string 点击退出登录时方法 不设置不显示退出按钮 或者string可为退出地址 //[可选]string 退出地址 使用zq内部方法 返回json格式 {code:1,data:'退出跳转地址'} {code:0,data:'未知错误'} code为0则提示data内容 logout: function () { console.log('你点击了退出'); } }); ~~~