layui-admin,layui adminlte
admin 09-15 09:25 60次浏览layui是一个前端UI框架。主要是配合JQuery使用。
开始使用 首先是下载文件，然后引入css和js文件。引入之后就需要在<script>标签里面写代码了。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提供了一个按钮样式layui-btn，那么只要在class里面写入这个样式就可以了。 <button class="layui-btn">按钮</button>// 这是一个button的按钮,如果你想用<a>也完全没问题<a rel="external nofollow" href="" class="layui-btn" >按钮还提供了大小和颜色，同样只需要添加对应的class类名就可以了。
使用表单。首先是有时候可能会刷新不出来表单内容，这时候需要在js代码里面添加： form.render(); //更新全部form.render('select'); //刷新select选择框渲染// 在更新的时候，有时候可能需要注意先后顺序的问题~在html里面，只要父元素里面有layui-form的元素，都会把他们渲染为layui的样式。比如说form表单,<form class="layui-form"></form>在这里的所有原始input/select等都会渲染为layui的样式。但是我如果不想用他们的样式，想要自己写样式，那么可以安静的萝莉添加lay-ignore，如
<input type="text" lay-ignore>在表单验证方面，除了可以自己写正则表达式外，layui也提供了验证属性lay-verify，具体的值可以在官方文档里面：内置模块–>表单 里面找。
// 提交的时候只能输入数字<input type="text" lay-verify="number">事件监听，这是一个非常有用的功能。比如说：监听select下拉框选中、submit提交等。使用方法为：
<select lay-filter="test">form.on('select(filter)', function(data){ // 这里的filter应该为test console.log(data.value); //得到被选中的值}); // select 就是监听select // filter 就是select表单里面填写的过滤器的值阻止表单跳转可以使用监听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() {} 修改样式。肯定有需要自己修改样式的时候，但是我发现layui的样式写的很死，你写的样式根本“比不过”它。我有两种方法： 第一种是行内样式，简单粗暴。缺点就是写在html内部，不利于维护和过度的耦合。而且通过layui渲染出来的html内容是没法写入的！第二种就是覆盖样式，通过f12 控制台的Elements选项卡里面复制它本身的类，然后在自己的css文件里面从新声明一次，在添上你自己的样式。这个方法亲测有效，就是比较麻烦。 使用layuiAmin模板的时候，左侧导航栏会发生很多问题，比如说全部打开，跳转页面返回后不关闭等等。所以我是这样写的： // 进入页面就给当前导航加上高亮 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，查看类名的渲染名称及位置。
写的可能有点乱，有些可能没想起来，到时候在补充吧。
标签：function,form,admin,layui,表单,样式,adminlte,table From： https://www.cnblogs.com/tomcat2022/p/16920231.html