原文连接：https://www.codeleading.com/article/10252080191
转载
有一个功能需要加：菜单折起来之后如何调用折叠事件。
$("#menuFirstList").on('click', 'li', function (e) {
// 如果是合起来的就展开
if ($('#LAY_app').hasClass('layadmin-side-shrink')) {
// 侧边伸缩。status 为 null：收缩；status为 “spread”：展开
parent.layui.admin.sideFlexible('spread');
}
})
本文只针对于layuiAdmin框架iframe版本
1.目录说明
2.宿主页面
3.加载 modules 目录下自己的 JS 模块
4.框架基础方法
config 模块
admin 模块
view 模块
5.文章彩蛋
1.目录说明
layuiadmin/modules/：存放 JS 业务模块，即属于自己的对视图进行事件等交互性处理
layuiadmin/layui/：layuiAdmin 的核心模块，一般不推荐修改
layuiadmin/lib/index.js：layuiAdmin 的入口模块
layuiadmin/style/：存放样式，其中 admin.css是核心样式
layuiadmin/config.js：layuiAdmin 的全局配置文件，可随意修改。
2.宿主页面
/dist/views/index.html
3.加载 modules 目录下自己的 JS 模块
<script>
//加载 modules 目录下的对应模块
小贴士：这里 console 模块对应 的 console.js 并不会重复加载，
然而该页面的视图可能会重新插入到容器，那如何保证脚本能重新控制视图呢？有两种方式：
1): 借助 layui.factory 方法获取 console 模块的工厂（回调函数）给 layui.use
2): 直接在 layui.use 方法的回调中书写业务代码，即:
layui.use('console', function(){
//同 console.js 中的 layui.define 回调中的代码
});
</script>
4.框架基础方法
config 模块
你可以在任何地方通过 layui.setter 得到 config.js 中的配置信息
1
admin 模块
var admin = layui.admin;
1.admin.req(options)
Ajax 请求，用法同 $.ajax(options)，只是该方法会进行错误处理和 token 的自动传递
2.admin.screen()
获取屏幕类型，根据当前屏幕大小，返回 0 - 3 的值
0: 低于768px的屏幕
1：768px到992px之间的屏幕
2：992px到1200px之间的屏幕3：高于1200px的屏幕
3.admin.sideFlexible(status)
侧边伸缩。status 为 null：收缩；status为 “spread”：展开
注意：如果是在 iframe 页面中执行关闭，需要如下写法：
parent.layui.admin.sideFlexible();
4.admin.on(eventName, callback)
事件监听
5.admin.popup(options)
弹出一个 layuiAdmin 主题风格的 layer 层，参数 options 跟 layer.open(options) 完全相同
6.admin.popupRight(options)
在屏幕右侧呼出一个面板层。options 同上。
admin.popupRight({
id: 'LAY-popup-right-new1' //定义唯一ID，防止重复弹出
,success: function(){
//将 views 目录下的某视图文件内容渲染给该面板
layui.view(this.id).render('视图文件所在路径');
}
});
7.admin.resize(callback)
窗口 resize 事件处理，我们推荐你使用该方法取代 jQuery 的 resize 事件，以避免多页面标签下可能存在的冲突。
8.parent.layui.admin.events.fullscreen($(window.parent.document).find('a[layadmin-event="fullscreen"]'));
全屏
9.parent.layui.admin.events.refresh();
刷新当前右侧区域
10.parent.layui.admin.events.closeThisTabs(); //当前页面是主页面不可关闭
关闭当前标签页
11.parent.layui.admin.events.closeOtherTabs();
关闭其它标签页
12.parent.layui.admin.events.closeAllTabs();
关闭全部标签页
13.事件监听
13.1 监听路由地址改变（hash）
// 下述中的 xxx 可随意定义，不可与已经定义的 hash 事件同名，否则会覆盖上一事件
admin.on('hash(xxx)', function(router){
console.log(router); //得到路由信息
});
13.2 监听侧边伸缩（side）
// 下述中的 xxx 可随意定义，不可与已经定义的 side 事件同名，否则会覆盖上一事件
admin.on('side(xxx)', function(obj){
console.log(obj.status); //得到伸缩状态：spread 为展开状态，其它值为收缩状态
});
view 模块
var view = layui.view
1.view(id)
获取指定容器，并返回一些视图渲染的方法，如：//渲染视图，viewPath 即为视图路径,dataoptions为传递给将要渲染视图的数据
view('id').render(viewPath,{dataoptions}).then(function(){
//视图文件请求完毕，视图内容渲染前的回调
}).done(function(){
//视图文件请求完毕和内容渲染完毕的回调
});
示例：
view("viewrender").render("system/theme", {
id: "我是传过去的值：",
text: "配色方案"
}).then(function(res) {
console.log(res)
}).done(function(res) {
console.log(res)
});
2.view('id').send(tpl, data);//直接向容器插入 html，tpl 为 模板字符；data 是传入的数据。该方法会自动完成动态模板解析
示例：
view("viewsend").send("我是HTML代码片段", {
id: "我是传过去的值"
}).then(function(res) {
console.log(res)
}).done(function(res) {
console.log(res)
});
5.文章彩蛋
1.如何使用jQuery？
答：layui内置了最稳定的模块jQuery，无需script引入jquery。
加载方式：
layui.use('jquery', function(){
var $ = layui.$ //重点处
//后面就跟你平时使用jQuery一样
$('body').append('hello jquery');
})；
2.为什么表单不显示或者赋不上值？
答：首先表单元素应该放在class="layui-form" 的容器中，其次，layui会对select、checkbox、
radio等原始元素进行隐藏，进行美化修饰处理。这就需要依赖form模块，所以你必须加载 form模块，
并且执行一个实例。最后，如果你的表单是动态生成的，自动渲染就会失效，你需要在创建
或者赋值之后执行form.render()方法来手动渲染。
3.如何手动渲染？
答： /* 监听动态添加或者赋值*/
$("#checkboxAdd").click(function(){
var resultHtml="";
var dynamicValue=[{value:"dance",text:"跳舞"},{value:"run",text:"跑步"}];// 模拟数据
$.each(dynamicValue, function(i,item) {
resultHtml+="<input type=\"checkbox\" name=\""+item.value+"\" lay-skin=\"primary\" title=\""+item.text+"\">";
});
$("#checkbox-box").append(resultHtml);
form.render(); // 动态生成或者赋值都需要手动渲染
});
4.lay-submit和lay-filter如何使用？
答： lay-filter：事件过滤器，主要用于事件的精确匹配，跟id选择器是比较类似的。任意字符。
lay-submit：绑定触发提交的元素，如button。无需填写值。任何元素一点加上lay-submit属性，即具有提交功能，可以对其监听提交事件。
如： <button class="layui-btn" lay-submit lay-filter="test">立即提交</button>
5.如何监听submit提交？
form.on('submit(test)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}这个很有用
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
6.如何获取ifream弹出层页面中的表单值供当前页面使用？
场景：假设在index.html里面有如下弹出框
layer.open({
content: "listform.html",//这里是另一个页面
yes: function(index, layero) {//分别为当前层索引、当前层DOM对象（listform.html层）
//需求：在点击确定的时候要取得listform.html页面中某个表单的值
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
console.log(body.find('input[name="title"]').val())//拿到listform.htmltitle表单的值
}
});
7.日期和时间组件laydate闪屏？
laydate.render({
trigger: 'click'//加上这句话
});
8.如何一次性获取ifream弹出层页面里面的所有表单值？
1.首先在ifream页面的表单容器（通常是from元素包裹的）里面添加一个提交按钮，默认隐藏。
2. var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
iframeWin.layui.form.on('submit(groupHigh)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
//layer.close(index); //关闭弹层
});
body.find('button[lay-filter="groupHigh"]').click();//触发提交按钮的提交事件
9.如何扩展和使用扩展模块？
1.扩展模块
2.使用模块
扫一扫
4701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
