## **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": "http://www.hmoore.net/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: ['http://www.hmoore.net/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('你點擊了退出'); } }); ~~~