layui笔记

在使用的时候 使用 layui.use 可以进行模块化的加载

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）

页面元素

#####布局

offset4 向右偏移

和bootstrap里面的布局差不多 都是使用删格系统 样式自己进行设置就好了

也是通过类名 进行控制 样式

删格系统的样式 写内联的 在新建一个div 进行编写样式

写在外层的div 简直是乱七八糟的

layui的栅格系统 太不成熟了

#####颜色

layui如何自定义模块 并使用 模块的语法是怎么样的

在官网下载包后

使用jq的方法

layui.use(['jquery', ], function(args) {
        var $ = layui.jquery;

    });

其他的模块如何使用jq呢

layui的模块化 这一块 周末再看看 看的头大 头大

“Fn”+“F5” 或者 “Fn”+“F6” 调节电脑的亮度 否则眼睛实在是太痛了

另外 就是 layui引入jq的方法 是使用lay.use进行引入

晚上回去再看看模块化这一块 看官方文档实在是太难以看懂了

layui使用jquery

layui.use(['jquery',], function(args){
var $= layui.jquery;
//……
});

ar now=new Date(); var 当前日期=now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()+" “+now.getHours()+”:"+now.getMinutes()+"-"+now.getSeconds();

将这个插件里面的全部代码都使用一边 踩踩里面的坑 坑

####layui的内置模块笔记

弹出层

使用layui框架 就不需要单独引入layer和jQuery文件

如果是单独引入的框架 就需要引入jQuery文件

• 两种用法 一种是直接在layer使用 一种是在layer使用

  • 在layer直接使用

  • 在layui中进行使用

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

    在layui中进行使用 就需要通过 use进行调用

• 参数的配置

  这个为何报错

  $.post('url', {}, function(str) {
                  layer.open({
                      type: 1,
                      content: str //注意，如果str是object，那么需要字符拼接。
                  });
   });
  

• 定义自己的样式

  layer.open({
    skin: 'demo-class'
  });
  在style标签里面  加上相关的样式
  body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  body .demo-class .layui-layer-btn a{background:#333;}
  body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}自定义
  

• 自定义高宽

area: ['500px', '300px']

offset设置相应的坐标

加入icon图标 进行加入表情

icon: 5

按钮的相关参数也是写在 layer.open 里面进行

layer.open({
            type: 1,
            area: ['400px', '320px'],
            shade: [0.8, '#393D49'],
            title: '新增',
            btnAlign: 'c',
            btn: ['确认', '取消'],
            yes: function(index, layero) {

            },
            btn2: function(index, layero) {},
            cancel: function() {

            }
   });

layer.open可以在里面进行设置相应相应的参数

日期和时间组件文档

定制版

var ins1 = laydate.render({
            elem: '#test1',
            mark: {
                '0-10-14': '生日',
                '0-12-31': '跨年' //每年12月31日
                    ,
                '0-0-10': '工资' //每个月10号
                    ,
                '2017-8-15': '' //具体日期
                    ,
                '2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
                    ,
                '2017-8-21': '发布'
            },
            done: function(value, date) {
                if (date.year === 2017 && date.month === 8 && date.date === 15) { //点击2017年8月15日，弹出提示语
                    ins1.hint('中国人民抗日战争胜利72周年');
                }
            }
});
为什么没有进行弹出

即时通信

这个稍微关注一下

表单

!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)
数据不能有特殊字符串
if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 

当模块有已经依赖 就不需要进行加载模块了

直接调用就可以了

var $ = layui.jquery;

#####加载jq模块 如果其他模块需要使用

// layui.use(['jquery', 'layer'], function() {
        //     var $ = layui.$ //重点处
        //         ,
        //         layer = layui.layer;

    //     //后面就跟你平时使用jQuery一样
    //     $('body').append('hello jquery');
    // });

使用jq

$.post