layui入门笔记

介绍

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

相关链接

• layui官网
• layui文档

入门学习

下载源码

最新版源码为layui-v2.3.0-rc1.zip，其目录结构如下：

子目录layui目录结构如下：

说明如下【摘自官网】：

  ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

快速上手

项目所需引入layui的文件

• 获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

• Web 弹层组件layer

  JS文件中DEMO示例，点击查看layer.open的基础参数

 layer.open({
     type: 1,
     title: '预警设置',
     area: ['690px', '230px'],
     content: $('#editForm'),
     btn: ['确定', '取消'],
     success: function (layero, index) {
             $("#isWarning").val(grid.isWarning);
             $("#warningPhone").val(grid.warningPhone);
             $("#warningNum").val(grid.warningNum);
             var form = layui.form();
             form.render();
         },
         end: function () {
             $("#warningDiv form input").each(function () {
                 $(this).val('');
             });
         },
         yes: function (index, layero) {
             if ($.trim($("#warningPhone").val()) == "") {
                 layer.msg("填写预警手机号");
                 return;
             }
             if ($.trim($("#warningNum").val()) == "" || $.trim($("#warningNum").val()) == "0") {
                 layer.msg("填写正确的不为0的预警数量");
                 return;
             }

             $.ajax({
                 url: "StockManger/inform",
                 type: "POST",
                 data: $('#formEdit').serialize(),
                 dataType: "json",
                 success: function (data) {
                     if (data.success == "true") {
                         layer.closeAll();
                         layer.msg(data.msg);
                         $("#search").click();
                     } else {
                         layer.msg(data.msg);
                     }
                 }
             });

         }
 });

layui模块规范

layui 的模块是基于 layui.js 内部实现的异步模块加载方式，它并不遵循于AMD（没有为什么，毕竟任性呀！），而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

• 预先加载。即一个JS文件中，写一个use即可。

layui.use(['layer','form', 'layedit', 'laydate', 'test', 'autocomplete'], function(){
    var form = layui.form() //获取form模块
        ,layer = layui.layer //获得layer模块
        ,layedit = layui.layedit
        ,laydate = layui.laydate //获得laydate模块
        ,test= layui.test
        ,autocomplete = layui.autocomplete
        ,jstree = layui.jstree;
    test.restVal();
    test.selectMove();
    test.formToggle({
        ifTableResize: true
    });
    $("#clear").click(function() {
            $('#orderNo').val('')
        $('#queryName').val('')
        $('#queryPhone').val('')
        $('#orderStatus').val('')
    })

});

layui.laydate

<input type="text" value="${start }" id="start" name="orderDate" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this,format: 'YYYY-MM-DD hh:mm:ss'})">

layui结合下拉框

<div class="layui-inline">
  <label class="layui-form-label width_90 f-12">订单状态</label>
  <div class="layui-input-inline pos-r">
    <div class="layui-input-inline pos-r" style="width: 192px;">
      <select id="orderStatus" name="orderStatus" style="width: 192px;">
        <option value=" ">全部</option>
        <option value="待接单">待接单</option>
        <option value="待收件">待收件</option>
        <option value="已收件">已收件</option>
        <option value="运输中">运输中</option>
        <option value="派件中">派件中</option>
        <option value="已签收">已签收</option>
        <option value="已下单">已下单</option>
        <option value="已取消">已取消</option>
      </select>
    </div>
  </div>
</div>