="layui-btn layui-btn-fluid">流体按钮</button>
1、下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip? /layui/css/layui.css . /layui/css/layui.css"> </head> ........... <script src=".. /<em>layui</em>/<em>layui</em>.js"></script> 4、全局配置:layui.config layui.config({ dir: '/res/layui/' //layui.js 所在路径(注意 ,layedit = layui.layedit; //do something }); 7、数据存储:layui.data ,layui.sessionData localStorage
layui-btn <button type="button" class="<em>layui</em>-btn">一个标准的按钮</button> 一个可跳转的按钮 layui-btn-primary,normal,warm,danger,disabled layui-btn-lg,sm,xs ? layui-btn-fluid ? layui-btn-radius ? 图标按钮 ? 按钮组:layui-btn-group ? 容器按钮:layui-btn-container ?
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来 先说前端HTML和js代码 <script src=" /<em>layui</em>/<em>layui</em>.js"></script> 先下载layuijs文件,在页面引入layui的js
组件 1、消息通知 直接下载 gitee 2、xmSelect下拉多选 直接下载 gitee 基于Layui, 下拉选择框的多选解决方案 前身前往formSelectes, 由于渲染速度慢, 代码冗余
其中 layui-anim 是必须的,后面跟着的即是不同的动画类
循环动画,追加:layui-anim-loop ?2组常用色彩搭配 灰色 内置的7中背景色:layui-bg-gray
Layui 分页是由 laypage 实现的,所以既需要分页 laypage 还需要数据表格相关的内容。
head> <meta charset="utf-8"> <title>layPage快速使用</title> <link rel="stylesheet" href="/static/build/<em>layui</em>.css " media="all"> </head> <body>
<script src="/static/build/<em>layui</em>.js"></script> <script> layui.use('laypage', function(){ var laypage = layui.laypage; //执行一个laypage实例 laypage.render——《海上钢琴师》 layui官网下架了,暂时这两天用非官方镜像代替吧 https://layui.itze.cn/
熟练掌握 layuiAdmin 的前提是熟练掌握 layui,因此除了本篇文档, layui 的文档 也是必不可少的存在。 src/layuiadmin/layui/:layui 基础框架,功能一般领先于官网提供下载的版本。 src/layuiadmin/lib/:layuiAdmin 的核心模块,通常不建议修改。 ', { container: 'LAY_app' //容器ID ,base: layui.cache.base //记录静态资源所在路径 ,views: layui.cache.base 如:layui.setter.base admin 模块 var admin = layui.admin; admin.req(options) Ajax 请求,用法同 $.ajax(options 实用组件 Hover 提示层 通过对元素设置 lay-tips=”提示内容” 来开启一个 hover 提示,如: <i class="<em>layui</em>-icon <em>layui</em>-icon-tips" lay-tips
layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本;然后引入laery.js;最后通过“function show(){var a = layer.open({…});}”方式使用laery.open 本教程操作环境:Windows7系统、layui2.4&&jquery2.2.1版,Dell G3电脑。 layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块 1、获取laery,你需要去官网下载 laery.js 地址–http://layer.layui.com/ 2、引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本 3、使用laery.open();function
如下是LayUI框架中页面元素的CSS优化样式: /* 表单输入框宽度 */ .layui-form-item .layui-input-inline { width: 295px; } /* 下拉框向上弹出 */ .layui-form-select dl { top: auto; bottom: 36px; } /* 表单必填项目 */ .label-required-next margin-left: 4px; font-weight: 700; line-height: 1.8em; } /* 解决通过方法渲染的表格checkbox不居中问题 */ .layui-table-cell .layui-form-checkbox[lay-skin="primary"] { top: 50%; transform: translateY(-50%); }
="layui-col-md9 layui-col-lg6 layui-bg-orange">你的内容 9/12
它还可以配置层默认的基础参数,如: codelayui.code layer.config({ shift: 1, //默认动画风格 skin: ‘layui-layer-molv’ //默认皮肤 /layer-ext-myskin/style.css’ //layer-ext-myskin即是你拓展的皮肤文件 ] }); //扩展css的规范:您必须在你扩展中的css文件加上这段 html #layui_layer_skinlayer-ext-myskinstylecss {display:none; position: absolute; width:1989px;} 规则就是:html #layui_layer_skin{文件夹名}{文件名}css skin名以文件夹名为标准 layer.open({ type: 2, shade: false, area: ‘500px’, maxmin: true, content: ‘http://www.layui.com’, zIndex
layui-main,layui-inline,layui-box ? layui-elip,layui-disabled,layui-circle,layui-show,layui-hide ? layui-text ? layui-bg-gray ? layui-btn layui-btn-primary ? 公共属性:lay-submit,lay-filter ?
依赖于组件element layui-card layui-card-header layui-card-body
你可以使用一个script标签存放模板,如: <script id="demo" type="text/html">