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

移动开发 2020-10-19 10:38:35 阅读次数: 0

1. 图标

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

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 文件上传(单文件多文件)

猜你喜欢

转载自blog.csdn.net/weixin_43591980/article/details/109148129
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022