当前位置:   article > 正文

layuiAdmin框架iframe版本个人总结_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就会报错。
扩展模块-1
扩展模块-2
在这里插入图片描述
2.使用模块
2.1页面引用了index模块
在这里插入图片描述
2.1页面没有引用index模块
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/711455
推荐阅读
相关标签
  

闽ICP备14008679号