适合后端开发者的前端样式框架LayUI笔记

哔哩哔哩学习链接:倜傥的雷哥的LayUI学习视频

1. 图标

layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-classunicode 来定义不同的图标。

LayUi官网图标文档:https://www.layui.com/doc/element/icon.html

方法1:字符实体

<!-- 方法1:字符实体(必须在容器标签内) -->
<div class="layui-icon" style="color: red;">&#xe68f;</div>

方法2:使用样式

<!-- 方法2:使用样式 -->
<i class="layui-icon layui-icon-heart-fill" style="color: green;"></i>

2. 按钮

向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。

LayUi官网按钮文档:https://www.layui.com/doc/element/button.html

在这里插入图片描述

颜色样式:

<button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮</button>

<button type="button" type="button" class="layui-btn">默认按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-danger">警告按钮</button>

<button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>

按钮尺寸:

<button type="button" type="button" class="layui-btn layui-btn-lg">大型按钮</button>
    
<button type="button" type="button" class="layui-btn">默认按钮</button>
    
<button type="button" type="button" class="layui-btn layui-btn-sm">小型按钮</button>
    
<button type="button" type="button" class="layui-btn layui-btn-xs">迷你按钮</button>

图标按钮:

<button type="button" class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加</button>

<button type="button" class="layui-btn"><i class="layui-icon">&#x1002;</i></button>

圆角按钮:

<button type="button" class="layui-btn layui-btn-radius layui-btn-primary">原始按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">百搭按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">暖色按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-danger">警告按钮</button>
    
<button type="button" class="layui-btn layui-btn-radius layui-btn-disabled">禁用按钮</button>

按钮组:

<div class="layui-btn-group">
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
        <i class="layui-icon">&#xe602;</i>
    </button>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe654;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon">&#xe640;</i>
    </button>
</div>

3. 导航栏菜单

导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如呼出二级菜单等,需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

LayUi官网导航文档:https://www.layui.com/doc/element/nav.html

在这里插入图片描述

导航栏方向(水平):

默认水平

<!-- 水平导航 -->
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
    <!-- 头像菜单项 -->
    <li class="layui-nav-item" style="float: right;">
        <a href=""><img src="https://t.cn/RCzsdCq" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">修改信息</a></dd>
          <dd><a href="javascript:;">安全管理</a></dd>
          <dd><a href="javascript:;">退了</a></dd>
        </dl>
     </li>
</ul>

导航栏方向(垂直):

layui-nav-tree

<!-- 垂直导航 -->
<ul class="layui-nav layui-nav-tree" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script src="../layui/layui.js"></script>
<script>
    //注意:导航 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

导航栏内容:

  • layui-nav:表示导航栏菜单
    • layui-nav-item:表示导航菜单的一个子项
      • layui-nav-child:表示子项的子项
    • layui-this:表示当前选中的菜单项

4. 选项卡

导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。

依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作)

LayUI官网选项卡文档:https://www.layui.com/doc/element/tab.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVJGDL4h-1603016498708)(D:\Note\笔记\前端\LayUI笔记.assets\image-20201015144141259.png)]

默认风格:

layui-tab

<!-- 默认风格 -->
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

简介风格:

layui-tab layui-tab-brief

<!-- 简洁风格 -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

卡片风格:

layui-tab layui-tab-card

<!-- 卡片风格 -->
<!-- lay-allowclose="true":卡片选项可关闭 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true">
    <ul class="layui-tab-title">
      <li class="layui-this">网站设置</li>
      <li>用户管理</li>
      <li>权限分配</li>
      <li>商品管理</li>
      <li>订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">1</div>
      <div class="layui-tab-item">2</div>
      <div class="layui-tab-item">3</div>
      <div class="layui-tab-item">4</div>
      <div class="layui-tab-item">5</div>
      <div class="layui-tab-item">6</div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

选项卡内容:

  • layui-tab:代表一个选项卡
    • layui-tab-title:代表选项卡标题
      • layui-this:代表选中当前标题
      • layui-tab-content:代表选项卡中的内容
        • layui-tab-item:代表选项卡对应标题下的内容
        • layui-show:显示选中标题下的内容

选项卡特殊属性:

<!-- lay-allowclose="true":卡片选项可关闭 -->
<div class="layui-tab layui-tab-card" lay-allowclose="true">

5. 进度条(略)

6. 面板 + 布局(重点)

一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等。

layui 的栅格系统采用业界比较常见的 12 等分规则,内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理,最低能支持到ie8。

依赖加载组件:element

LayUI官网面板文档:https://www.layui.com/doc/element/tab.html

LayUI官网布局文档:https://www.layui.com/doc/element/layout.html

在这里插入图片描述

面板:
卡片面板
  • layui-card:代表一个卡片面板
    • layui-card-header:代表卡片面板头部
    • layui-card-body:代表卡片面板内容
折叠面板(默认)
  • layui-collapse:代表一个折叠面板
    • layui-colla-item:代表一个折叠面板的内容项
      • layui-colla-title:代表内容项的标题
      • layui-colla-content:代表内容项的内容
      • layui-show:代表内容项默认展开
手风琴面板

在普通折叠面板的基础上加上lay-accordion 属。

手风琴和普通折叠面板的区别是,前者一次只能打开一个面板,后者可以打开多个面板

布局:
布局属性
  • layui-row
    • layui-col-space15 代表列之间的间距,距离范围: space0-space30
      • layui-col-md6 代表一列 md1-md12 代表当前列占整行的x/12
        • layui-col-md-offset3 代表列的偏移

列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。

例如:

<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
	移动:6/12 | 平板:6/12 | 桌面:4/12
</div>

实例:

<div class="layui-row layui-col-space30">
    <div class="layui-col-md6" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md6" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 卡片面板 -->
        <div class="layui-card">
            <div class="layui-card-header">卡片面板</div>
            <div class="layui-card-body">
                卡片式面板面板通常用于非白色背景色的主体内<br>
                从而映衬出边框投影
            </div>
        </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 折叠面板 -->
        <div class="layui-collapse">
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">杜甫</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">李清照</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">鲁迅</h2>
              <div class="layui-colla-content layui-show">内容区域</div>
            </div>
          </div>
    </div>
    <div class="layui-col-md12" style="background-color: ghostwhite;">
        <!-- 手风琴面板 -->
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">杜甫</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">李清照</h2>
              <div class="layui-colla-content">内容区域</div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">鲁迅</h2>
              <div class="layui-colla-content layui-show">内容区域</div>
            </div>
          </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>

7. 徽章(略)

8.时间线(直接看demo)

在这里插入图片描述

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
        <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>

在这里插入图片描述

9.动画(略)

layui 的动画全部采用 CSS3,因此不支持ie8和部分不支持ie9(即ie8/9无动画)

LayUI官网动画文档:https://www.layui.com/doc/element/anim.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图标01</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/css/layui.global.css">
  <style>
    .site-doc-icon li {
      width: 222px;
    }

    .site-doc-icon li .layui-anim {
      width: 150px;
      height: 150px;
      line-height: 150px;
      margin: 0 auto 10px;
      text-align: center;
      background-color: #009688;
      cursor: pointer;
      color: #fff;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <br>
  <br>
  <br>
  <ul class="site-doc-icon site-doc-anim">
    <li>
      <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
      <div class="code">layui-anim-up</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
      <div class="code">layui-anim-upbit</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
      <div class="code">layui-anim-scale</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
      <div class="code">layui-anim-scaleSpring</div>
    </li>
  </ul>
  <ul class="site-doc-icon site-doc-anim">
    <li>
      <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
      <div class="code">layui-anim-fadein</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
      <div class="code">layui-anim-fadeout</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
      <div class="code">layui-anim-rotate</div>
    </li>
    <li>
      <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
      <div class="code">追加:layui-anim-loop</div>
    </li>
  </ul>
</body>
</html>
<script src="../layui/layui.js"></script>
<script>
  layui.use('jquery', function () {
    var $ = layui.$;

    //演示动画
    $('.site-doc-icon .layui-anim').on('click', function () {
      var othis = $(this), anim = othis.data('anim');

      //停止循环
      if (othis.hasClass('layui-anim-loop')) {
        return othis.removeClass(anim);
      }

      othis.removeClass(anim);

      setTimeout(function () {
        othis.addClass(anim);
      });
      //恢复渐隐
      if (anim === 'layui-anim-fadeout') {
        setTimeout(function () {
          othis.removeClass(anim);
        }, 1300);
      }
    });
  });
</script>

10. 颜色选择器(略)

官网案例地址:https://www.layui.com/demo/colorpicker.html

11. 滑块(略)

官网案例地址:https://www.layui.com/demo/slider.html

12. 评分(略)

官网案例地址:https://www.layui.com/demo/rate.html

13. 轮播

官网案例地址:https://www.layui.com/demo/carousel.html

案例:
在这里插入图片描述

<body>
    <br>
    <br>
    <br>
    <div class="layui-carousel" id="test" lay-filter="test4" style="">
        <div carousel-item="">
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
            <div><img src="./images/liberary.png" width="100%" height="100%"></div>
        </div>
    </div>
    <br>
    <br>
</body>

</html>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'carousel'], function () {
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var element = layui.element;
        //图片轮播
        carousel.render({
            elem: '#test'
            , width: '100%'
            , height: '400px'
            , interval: 3000
        });
    });
</script>

14. 代码修饰器(略)

15. 时间和日期选择器(略)

16. 表单及其元素 (from/input/select)

官网demo:https://www.layui.com/demo/form.html

直接看demo 就能上手。

17. 弹出层(重点)

LayUI官方文档:https://www.layui.com/doc/modules/layer.html

弹框:

  • layer.alert()
  • 提示框(可加图标)
  • layer.confirm()
  • 确认框
  • layer.prompt()
  • 输入框
  • layer.tab()
  • 选项卡弹框
  • layer.photos(options)
  • 相册层弹框
  • layer.msg
  • 弱弱的提示框
  • layer.tips
  • 吸附提示框(可控制上下左右方位,前提必须外边框足够大)
  • layer.open(options)
  • 原始弹框的核心方法

示例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

 <br>
 <button type="button" id="btn1" class="layui-btn">alert</button>
 <button type="button" id="btn2" class="layui-btn">confirm</button>
 <button type="button" id="btn3" class="layui-btn">prompt</button>
 <button type="button" id="btn4" class="layui-btn">tab</button>
 <button type="button" id="btn5" class="layui-btn">photos</button>
 <button type="button" id="btn6" class="layui-btn">msg</button>
 <br><br><br>
 <div style="width: 200px;height: 200px;">
     <button type="button" id="btn7" class="layui-btn">tips</button>
 </div>
 <br>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'carousel', 'layer'], function () {
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var element = layui.element;
        var layer = layui.layer;

        //alert
        $("#btn1").click(function () {
            layer.alert("只是简单的提示框!");
            layer.alert("加个图标的提示框", { icon: 6 });
            // 图标分为1-7
            // 如果还想执行yes回调,可以放第三个参数
        })

        //confirm
        $("#btn2").click(function () {
            layer.confirm("你确定要退出吗?", { icon: 3, title: '提示' }, function (index) {
                alert("你选择了确定")
                layui.close(index);
            });
        })

        //prompt
        $("#btn3").click(function () {
            layer.prompt({
                formType: 2,
                value: '初始值',
                title: '请输入值',
                area: ['200px', '100px'] //自定义文本域宽高
            }, function (value, index, elem) {
                alert(value); //得到value
                layer.close(index);
            });
        })

        //tab
        $("#btn4").click(function () {
            layer.tab({
                area: ['600px', '300px'],
                tab: [{
                    title: 'TAB1',
                    content: '内容1'
                }, {
                    title: 'TAB2',
                    content: '内容2'
                }, {
                    title: 'TAB3',
                    content: '内容3'
                }]
            });
        })

        //photos
        $("#btn5").click(function () {
            layer.photos("只是简单的提示框!");
        })

        //msg
        $("#btn6").click(function () {
            layer.msg("弱弱的提示框!");
            layer.msg("带图标的弱弱的提示框!",{icon:6});
        })

        //tips
        $("#btn7").click(function () {
            layer.tips("简单的吸附提示框!",'#btn7',{tips:1});
        })
    });
</script>

layer.open()基础参数:

  • title - 标题:类型:String/Array/Boolean,默认:‘信息’

    title支持三种类型的值,若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

  • content - 内容:类型:String/DOM/Array,默认:’’

    content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

    /!*
     如果是页面层
     */
    layer.open({
      type: 1, 
      content: '传入任意的文本或html' //这里content是一个普通的String
    });
    layer.open({
      type: 1,
      content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
    });
    //Ajax获取
    $.post('url', {}, function(str){
      layer.open({
        type: 1,
        content: str //注意,如果str是object,那么需要字符拼接。
      });
    });
    /!*
     如果是iframe层
     */
    layer.open({
      type: 2, 
      content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
    }); 
    /!*
     如果是用layer.open执行tips层
     */
    layer.open({
      type: 4,
      content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
    });        
    
  • skin - 样式类名:类型:String,默认:’’

    skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lan**layui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子

    //单个使用
    layer.open({
      skin: 'demo-class'
    });
    //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
    layer.config({
      skin: 'demo-class'
    })
    //CSS 
    body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
    body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
    body .demo-class .layui-layer-btn a{background:#333;}
    body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
    …
    加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。  
    
  • area - 宽高:类型:String/Array,默认:‘auto’

    在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]

  • offset - 坐标:

    类型:String/Array,默认:垂直水平居中

    offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:

    备注
    offset: ‘auto’默认坐标,即垂直水平居中
    offset: ‘100px’只定义top坐标,水平保持居中
    offset: [‘100px’, ‘50px’]同时定义top、left坐标
    offset: ‘t’快捷设置顶部坐标
    offset: ‘r’快捷设置右边缘坐标
    offset: ‘b’快捷设置底部坐标
    offset: ‘l’快捷设置左边缘坐标
    offset: ‘lt’快捷设置左上角
    offset: ‘lb’快捷设置左下角
    offset: ‘rt’快捷设置右上角
    offset: ‘rb’快捷设置右下角
  • icon - 图标:信息框和加载层的私有参数

    类型:Number,默认:-1(信息框)/0(加载层)

    信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2。如:

    //eg1
    layer.alert('酷毙了', {icon: 1});
    //eg2
    layer.msg('不开心。。', {icon: 5});
    //eg3
    layer.load(1); //风格1的加载
    
  • time - 自动关闭所需毫秒:类型:Number,默认:0

    默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)

  • anim - 弹出动画:类型:Number,默认:0

    我们的出场动画全部采用CSS3。这意味着除了ie6-9,其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,3.0之前的版本用的是 shift 参数

    备注
    anim: 0平滑放大。默认
    anim: 1从上掉落
    anim: 2从最底部往上滑入
    anim: 3从左滑入
    anim: 4从左翻滚
    anim: 5渐显
    anim: 6抖动
  • type - 基本层类型:类型:Number,默认:0

    layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用*layer.open({type: 1})*方式调用,则type为必填项(信息框除外)

注意弹框也可以用来做表单提交,类似于bootstrap的模态框,其有专门的请求提交类型method:‘post’ 以及回调函数success:function(),这里可以看下面这篇博客自行了解:

LayUI弹出层表单提交参考demo

18. 数据表格(重点)

LayUI的数据表格可以通过拿到后端回调的json字符串,直接渲染到表格中,并自带分页功能,从而节约了后端分页的负担!
为方便测试,这里我采用LayUI 官方提供的json串接口:
https://www.layui.com/demo/table/user/
在这里插入图片描述
接下来进行表格数据渲染:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <br>
    <br>
    <table class="layui-table" id="userTable" lay-filter="userTable"></table>
</body>

</html>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery;
        var table = layui.table;

        // 渲染数据表格
        table.render({
            elem: '#userTable'
            // 请求的json返回接口,因为直接访问存在跨域问题
            // 这里我建议在后端配置跨域或者自定义提供json串的接口
            , url: 'http://www.layui.com/demo/table/user/'
            // ,title:"用户数据表"//导出数据表格时的标题
            , cols: [[// 数据表格中的内容
                { field: 'id', width: 80, title: 'ID', sort: true }
                , { field: 'username', width: 80, title: '用户名' }
                , { field: 'sex', width: 80, title: '性别', sort: true }
                , { field: 'city', width: 80, title: '城市' }
                , { field: 'sign', title: '签名', minWidth: 150 }
                , { field: 'experience', width: 80, title: '积分', sort: true }
                , { field: 'score', width: 80, title: '评分', sort: true }
                , { field: 'classify', width: 80, title: '职业' }
                , { field: 'wealth', width: 135, title: '财富', sort: true }
            ]]
            , page: true// 分页开启
        });
    });
</script>

效果展示:
(自带分页真的很方便,比我每次花时间写后端的分页逻辑便捷多了,与其用mybatisPlus的分页插件pageHelper不如直接在前端处理分页,强烈建议根据官网文档自学一下!)
官网demo链接:https://www.layui.com/demo/table.html
官网文档链接:https://www.layui.com/doc/modules/table.html
在这里插入图片描述

20. 文件上传

LayUI 文件上传可以单文件上传也可以多文件上传,对于有springboot基础的小伙伴,可以阅读下面这篇博客详细了解,这里不再赘述,对于没有文件上传下载经验的小伙伴,建议去学习一下后端如何写文件上传下载接口,在自己亲自尝试!

springboot+LayUI 文件上传(单文件多文件)

兴趣使然的草帽路飞 CSDN认证博客专家 MySQL Spring Java
双非本科软件工程大三在校生,一个靠自学为主的Java萌新,希望和大家一起共同进步,记录自己的成长历程!冲冲冲!O(∩_∩)O~
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页