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直接使用
<script src="layer.js"></script> <script> layer.msg('hello'); </script> -
在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