909422229_前端框架layUI

百度百科：

Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。

在本人最近的项目中，采用的就是该前端框架，现学现卖，哈哈。也是基于bootstrap的基础上的一个前端框架。个人感觉很不错。

layUI官网：http://www.layui.com/

layUI Demo演示网址：http://www.layui.com/demo/button.html

admin EAP【也是layUI的DEMO】地址：http://www.admineap.com/

layUI文档网址：http://www.layui.com/doc/

下面我会结合项目中的一些常用元素的取值、赋值、提交作出总结。

表单：http://www.layui.com/doc/element/form.html

layUI比较个性的是根据lay-filiter进行表单取值等各个事件。

另外表单的元素是根据name进行取值。

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

 

对于下拉框、fu复选框、单选框等赋值需要进行渲染页面，否则无法正常显示动画：

 form.on('checkbox(checkbox2)', function(data){
				  checkbox = data.elem.checked;
				  if(data.elem.checked){
					  $("#message").show();
					  $("[name='mg']").attr('lay-verify','required');
					  $("[name='sendMsgMoudle']").attr('lay-verify','required');
				  }else{
					  $("#message").hide();
					  $("[name='mg']").removeAttr('lay-verify');
					  $("[name='sendMsgMoudle']").removeAttr('lay-verify');
					  $("[name='sendMsgMoudle']").val('');
					  var ch = $("input[name='mg']");
						for (var i = 0; i < ch.length; i++) {
								ch[i].checked = false;
						}
				  }
				  form?form.render("select"):null;
				});

表单的取值也是根据name属性进行控制，所以name名字要唯一，谨防出现重名问题。

form.on('submit(formDemo)', function(data){
				  
				  	  // console.log(data.field) 
					   planName = data.field.planName;//计划名称
					   moudleId = data.field.moudleId;//项目ID
					   qdDate = data.field.qdDate;//启动日期
					   sendMsgMoudle = data.field.sendMsgMoudle;//短信模板
					   duanmessage = data.field.duanmessage;//是否发送短信
					   //aiNumber = data.field.aiNumber;
					   availabilityNumber = data.field.availabilityNumber;/
					   duanmessage = data.field.duanmessage;
				  	   startWay = data.field.radio1;//手动  自动
					   $("input:checkbox[name='mg']:checked").each(function() { 
							mg +=  ','+$(this).val();
						}); 
					  
				  addPlan();
				  return false; 
				});