layUI基本使用2（js）

最新推荐文章于 2024-02-21 16:22:56 发布

sdtvpengl

最新推荐文章于 2024-02-21 16:22:56 发布

阅读量2.7k

点赞数 2

文章标签： layui 前端

本文链接：https://blog.csdn.net/weixin_47124508/article/details/116030070

版权

历史数据专栏收录该内容

4 篇文章 0 订阅

订阅专栏

弹框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({	//初始化upload
            elem:'#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 + "星"));
            }
        });
    });

在这里插入图片描述

sdtvpengl

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
layUI基本使用2（js）

弹框layer.open()<!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="style
复制链接

扫一扫