3. layui的layer的用法

1. 初始化layui组件

加载layui框架的项目包，一定要在文本就绪时间中初始化layui组件，否则可能导致多个组件无法使用。

2. mouse浮动展示信息提示框

（layer提供的简洁的信息提示窗口，可以设置信息提醒，其中格式可遵循h5标签，如
换行）

h5中设置属性：
onmouseenter ="showName(\'"+dataArr[i].AppName+"\');\"

js中：
function showName(name){
	layer.msg('节点名称：' + name,{
		time : 1500
	});
}

3. 用layui初始化layer

layui.use('layer', function(){
  var layer = layui.layer;
  layer.msg('hello');
});  

4. 实现可输入框式弹窗的父子传值，页面关闭逻辑。如：

代码实现：参数参考官网

layer.open({
	type：‘1’，								//类型：Number，默认：0，layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）					
	title: '新增部门',						//弹窗标题
	maxmin: true,							//支持最大最小化
	shadeClose: false,						//是否点击遮罩关闭
	shade: 0.2,								//遮罩
	area : getOpenPageSize('500','380'),	//设置窗口大小
	content: '<%=request.getContextPath()%>/pages/dataAssets/mlEdit.jsp?type=1'  //弹出的jsp界面,同时向子页面传递数据
});

打开的窗口逻辑

var form = layui.form;						//初始化layui
var layer = layui.layer;					//初始化layer
$(function(){
	form.render('select');					//先进行渲染
	p_type = GetQueryString("type");		//从父界面url参数中获取type值
}

//解析url传参，在子界面获取type的值
function GetQueryString(name) {
	var reg =new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if (r !=null)
		return decodeURIComponent(r[2]);
	return null;
}

//保存
function insertAjax(type,mlInfo){			//点击保存的方法
		var mlInfo = {};					//初始页面数据,增加使用
		var id = uuid(32,16);				//添加数据
		mlInfo.id = id ;
		mlInfo.number = $("#dept_number").val();
		mlInfo.name = $("#dept_name").val();
		mlInfo.type = $("#dept_type").val();
		mlInfo.responsibility = $("#dept_responsibility").val();
		commonAjax(p_type,mlInfo);			//调用ajax方法去后台进行添加数据
		parent.getDataCount();				//父jsp显示的数据需要特殊处理，重新调用父js中的方法加载数据，调用父jsp界面中的数据和方法只需要加上parent.
	}
//放弃
function cancel_fun(){
	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
	parent.layer.close(index);				// 根据索引关闭窗口
}

5. 关于layui中按钮，表单不显示问题？

当我们在项目中引入layui的css和js包之后，在官网拷入代码

但是在自己的项目中始终无法显示，需要注意还要在js中填入以下代码进行渲染

layui.use('form', function(){
  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
  //……
  //但是，如果你的HTML是动态生成的，自动渲染就会失效
  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
  form.render();
}); 

6. layui按钮实现点击开启显示隐藏表单

1. 设置div的display为none，之后使用layui的

<input id="transfer" type="checkbox" name="tran_radio"  lay-filter="switchTest"  lay-skin="switch" lay-text="是|否">

2. 在js中的实现

layui.use(['form'], function(){
    var form = layui.form;
    layer = layui.layer;
    //监听指定开关
    form.on('switch(switchTest)', function(data){
	    if(this.checked == false){
	    	$("#radio_div").attr("style","display:none;");
		    //开关标识位
	    	flag = true;
	    }else if(this.checked == true){										 				 $("#radio_div").attr("style","display:block;");
	    	flag = false;
    	} 
    }); 
});

7. 使用layui设置表单的必填项

1. 设置表单css的*

.layui-form-required{
	color: #f56c6c;
	margin-right: 4px;
 }

2. 在label前添加span样式显示*

<span class="layui-form-required">*</span>

3. 设置表单的必填项

<input type="text" id="dwName" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">

4. 设置表单提交，必须要有lay-submit

<button id="btn_save" lay-submit="" onclick="save_fun();"  class="layui-btn layui-btn-normal">保存</button>