layUI基本使用2（js）

弹框layer.open()

较多配置详见 https://www.layui.com/doc/modules/layer.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"><link rel="stylesheet" type="text/css" href="/static/layui/css/modules/layer/default/layer.css"><script src="/static/layui/layui.js"></script>
</head>
<body><script type="text/javascript">layer.msg('hello layer!')</script>
</body>

layer.open({type:0, <!--层类型：type选择0-4，对应不同的样式0为默认层，1为tip层，2为嵌套iframe层，3为加载层，4为隔层-->title:['提示信息','font-size:15px;color:green'],<!--标题设置-->content:'这是内容'}
)

layer.open({type:2, <!--嵌套iframe层,content中嵌套url-->title:['提示信息','font-size:15px;color:green'],<!--标题设置-->content:'http://www.baidu.com'}
)

layer.open({type:0, <!--嵌套iframe层,content中嵌套url-->title:['提示信息','font-size:15px;color:green'],<!--标题设置-->icon:0,<!--图标样式0-6，自己测一测-->area:['400px','400px'],<!--弹出框的大小-->btn:['submit','reset'],<!--定义按钮，可写回调-->btnAlign:'l',<!--按钮的对齐方式，'l'、'r'、'c'-->offset:['100px','100px'],<!--设置弹出层的坐标位置-->time:4000,<!--自动关闭时长，单位是毫秒-->anim:0,<!--弹出层划入动画效果，取值0-6-->content:'http://www.baidu.com'}
)

日期时间laydate.render()

较多配置详见 https://www.layui.com/doc/modules/laydate.html

layui.use('laydate',function () {var laydate = layui.laydate;laydate.render({elem:'#date',type:'datetime',<!--可选类型有year，month，date，time，datetime根据需要选择-->})
})

layui.use('laydate',function () {var laydate = layui.laydate;laydate.render({elem:'#date',type:'datetime',<!--可选类型有year，month，date，time，datetime根据需要选择-->range:true, <!--该属性可设置时间段-->theme:'grid',<!--设置主题-->format:'yyyy年M月d日HH点mm分', <!--格式化-->})
})

range展示

格式化展示

常见格式

分页laypage

较多配置详见 https://www.layui.com/doc/modules/laypage.html，
结合后端和table分页一起来学习。

<div id="page"></div>
<script type="text/javascript">layui.use(['laydate', 'laypage'], function () {var laydate = layui.laydate;laypage = layui.laypage;laypage.render({elem: 'page'<!--不需要#-->,limit:30<!--每页限制条数，不写则默认每页10条-->,count:100<!--数据总条数，默认每页10条-->,theme:'#324411'<!--定义任意颜色主题-->,jump:function(obj,first){console.log(obj.curr);//得到当前页，以便向服务端请求对应页的数据。console.log(obj.limit);//得到每页显示的条数})})

文件上传 upload

layui.use(['laydate', 'laypage','upload'], function () {var laydate = layui.laydate;laypage = layui.laypage;upload = layui.upload;var uploadInst = upload.render({  //初始化uploadelem:'#file',   //绑定元素url:'upload/user'  //上传路径multiple:true,//多文件上传exts:'jpg|png|pdf', //限制上传文件格式size:100, //限制上传文件大小data: {     //接口参数?id: function(){return $('#id').val();}}})})

动态数据表格table

较多配置详见 https://www.layui.com/doc/modules/table.html

table.render({elem: '#demo',height: 312,url: '/static/test.json' //数据接口或者json测试文件,page: true //开启分页,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]]});});

轮播图carousel

较多配置详见 https://www.layui.com/doc/modules/carousel.html

<div class="layui-carousel" id="test1"><div carousel-item><div>条目1</div><div>条目2</div><div>条目3</div><div>条目4</div><div>条目5</div></div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> --><script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){var carousel = layui.carousel;//建造实例carousel.render({elem: '#test1',width: '100%' //设置容器宽度,arrow: 'always' //始终显示箭头//,anim: 'updown' //切换动画方式});
});
</script>

数据验证form

较多配置详见 https://www.layui.com/doc/modules/form.html

<form class="layui-form" id="formTest"><div class="layui-form-item" style="width: 300px"><label class="layui-form-label">邮箱：</label><div class="layui-input-block"><input type="text" placeholder="请输入邮箱地址" class="layui-input" lay-verify="required|email"> //多重验证</div></div>
<div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="*">立即提交</button></div></div>
</form>
<div id="rateTest"></div>
<script type="text/javascript">layui.use('form', function () {var form = layui.form;form.render({elem: '#formTest',});});

评分rate

较多配置详见 https://www.layui.com/doc/modules/rate.html

<div id="rateTest"></div>
<script type="text/javascript">layui.use('rate', function () {var rate = layui.rate;rate.render({elem: '#rateTest',half: true, //半星text: true,    //显示文字setText: function (value) {var arrs = {    //文字注释'1': '极差', '2': '差', '3': '中等', '4': '好'};this.span.text(arrs[value] || (value + "星"));}});});

layUI基本使用2（js）相关推荐

layui中使用clipboard.js
layui中使用clipboard.js 修改clipboard.js layui.config引用clipboard模块修改clipboard.js 参考链接:https://fly.layui. ...
Layui框架下：JS中根据后台查询到的数据动态往div中ul里面动态添加li
Layui框架下:JS中根据后台查询到的数据动态往div中ul里面动态添加li 先建立好一个div和ul JS代码: $(function () { layui.admin.req({ url: _s ...
php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在最后将核心代码 ...
layui 如何去dom_layui 的基本使用介绍
layui 的基本使用介绍全局配置 layui.config({ dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参 ...
layui select 赋值_layui给下拉框及日期组件赋值
一.吐槽,layui感觉真的是比较不好用二.为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿, 可能一个功能的开发我用其vue框架很简便就实现了,但 ...
MVC下实现LayUI分页的Demo
1.后台获取数据示例 public JsonResult GetPageNew(int page,int pagesize) { var list = _context.ArticleInfo.Ski ...
利用lay-ui结合ajax实现分页功能(不借助框架,简单易懂)
效果图: 1.创建html页面 01.html(前台文件) 2.创建index.php(后台文件) ------------------热身结束,开始正式分页之旅------------------ ...
layui html模块化,终于搞懂了layui的模块化
这是index.js文件内容: layui.define(['form','layer','element'],function(exports){ var $ = layui.$; var form ...
layui 加载第三方插件
layui 加载第三方插件 1. 使用模块 2. 内置模块 3. 扩展一个 layui 模块 4. 加载第三方插件为layui模块 1. 使用模块 Layui的模块加载采用核心的 layui.use( ...
最易懂的layui分页
该篇文章是在layui前端框架之分页基础上简洁化和详细化. 首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行. 至于lay ...