layui是一个前端UI框架。主要是配合JQuery使用。
标签里面写代码了。layui里的js代码都需要在layui.use()
里面写。举个例子,如果你想写form
表单,那么在html里面复制代码之后,需要在js
文件里面这样写:
layui.use('form', function() {
let form = layui.form;
})
上面的代码就是准备工作,之后就能在页面里面看到内容了。如果你还想在这个页面里面加入表格,那么直接在use
后面添加:
layui.use(['form', 'table'], function() {
let form = layui.form;
let table = layui.table;
// 上面这种方式可以简写为:
let form = layui.form,
table = layui.table;
})
Jquery
,那么只要像上面那样引入jquery
模块就好了,不必自己单独引入jquery文件了。但是你想自己引入也没问题,页面只会加载一个jquery
文件。像这样:['form', 'table', 'jquery'], function() {
let form = layui.form;
let table = layui.table,
let $ = layui.$;
}
写完上述代码之后,就可以使用jquery
了。
layui-btn
,那么只要在class
里面写入这个样式就可以了。
// 这是一个button的按钮,如果你想用也完全没问题
按钮还提供了大小和颜色,同样只需要添加对应的class
类名就可以了。
js
代码里面添加:form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
// 在更新的时候,有时候可能需要注意先后顺序的问题~
在html里面,只要父元素里面有layui-form
的元素,都会把他们渲染为layui的样式。比如说form表单,在这里的所有原始input/select等都会渲染为layui的样式。但是我如果不想用他们的样式,想要自己写样式,那么可以在里面添加
lay-ignore
,如
在表单验证方面,除了可以自己写正则表达式外,layui也提供了验证属性lay-verify
,具体的值可以在官方文档里面:内置模块–>表单 里面找。
// 提交的时候只能输入数字
事件监听,这是一个非常有用的功能。比如说:监听select下拉框选中、submit提交等。使用方法为:
阻止表单跳转可以使用监听submit:
form.on('submit(*)', function(data){
console.log(data.field) // 当前容器的全部表单字段,名值对形式:{name: value}
return false; // 阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
也可以使用jquery来获取submit,然后使用函数来return false
。
table.render
这里面写。如果有头栏的话,另外在 外面写table.on
事件。在表格里,使用select下拉框的时候,有时候会遮挡,当时使用了什么方法我忘了,虽然可以阻止上面一部分不被遮挡,但是表格最后几行的下拉框照样会被挡住。所以我选择了使用一个弹层来代替下拉框layer.open({type: 2}
。这里同样需要先声明一下layer,然后才能使用。
function test() {}
会报错,可以使用这种方式window.test = function() {}
或者函数表达式的方式
let test = function() {}
f12
控制台的Elements
选项卡里面复制它本身的类,然后在自己的css
文件里面从新声明一次,在添上你自己的样式。这个方法亲测有效,就是比较麻烦。// 进入页面就给当前导航加上高亮
window.addNavActive = function () {
$('.layui-this').parents('li').addClass('layui-nav-itemed');
}
// 跳转返回页面之后给导航加高亮
window.returnAddActive = function (name) {
$('.layui-nav-item').removeClass('layui-nav-itemed')
$('dd[data-name=' + name + ']').parents('li').addClass('layui-nav-itemed')
$('dd[data-name=' + name + ']').addClass('layui-this')
};
这样在所有的页面都需要调用一下这个函数,缺点就是比较麻烦,不知道有没有更好的方法。
4.有时候你看不懂这个框架的渲染方式的时候,可以打开f12
,查看类名的渲染名称及位置。
写的可能有点乱,有些可能没想起来,到时候在补充吧。