layuiAdmin框架iframe版本个人总结_layuiadmin iframe版

1.目录说明

    layuiadmin/modules/：存放 JS 业务模块，即属于自己的对视图进行事件等交互性处理
	layuiadmin/layui/：layuiAdmin 的核心模块，一般不推荐修改
	layuiadmin/lib/index.js：layuiAdmin 的入口模块	
	layuiadmin/style/：存放样式，其中 admin.css是核心样式
	layuiadmin/config.js：layuiAdmin 的全局配置文件，可随意修改。
1
2
3
4
5

2.宿主页面

	/dist/views/index.html
1

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>
1
2
3
4
5
6
7
8
9
10

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 为展开状态，其它值为收缩状态
		});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

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)
				});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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();//触发提交按钮的提交事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

6.高阶

如何扩展和使用扩展模块？

1.扩展admincommon公共模块
在layui.define([“form”, “layer”, “formSelects”], 的数组中可以提前加载需要的模块，其中jQuery不需要写进数组中，在回调函数中声明即可var $ = layui.$。特别说明：当依赖中存在非layui内置的模块如：formSelects时，那引用admincommon文件的页面也需要依赖formSelects模块，否则admincommon中找不到formSelects就会报错。



2.使用模块
2.1页面引用了index模块

2.1页面没有引用index模块