跳至主要內容

LayUI

TenSoFlow...大约 16 分钟前端前端框架LayUI

LayUI

第01章 官网

LayUI官网open in new window

Layui 组件文档open in new window

LayUI组件示例open in new window

第02章 简介

LayUI，是一款采用自身模块规范编写的前端 UI 框架， 遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。LayUI首个版本发布于2016年秋，由国人开发。它区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是为服务端程序员量身定做，开发者无需涉足各种前端工具的复杂配置，只需面对浏览器本身，使得开发十分便捷。

第03章 特点

返璞归真

身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 Layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，遵循于原生态的书写指令，试图以更简单的方式诠释高效。

双重体验

拥有双面的不仅是人生，还有 Layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的呈现。简而全的理念贯穿内外，两面合璧。

星辰大海

初衷源于一团零星之火，几经能量聚合，光与热逐渐延伸，也曾一度成为炽热的火焰。后来秋风萧瑟，应时而变的 Layui 散作满天星辰。透过这冷暖轮回，眼前是我们依然坚持的热爱。

第04章 安装

LayUI下载open in new window

第05章 使用

快速上手

下载完成后在src目录下创建HTML文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
    
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
    
</head>
    
<body>
    
  <!-- HTML Content -->
  <script src="//cdn.staticfile.org/layui/2.8.17/layui.js"></script>
  <script>
    // Usage
    layui.use(function(){
      var layer = layui.layer;
      // Welcome
      layer.msg('Hello World', {icon: 6});
    });
  </script>
    
</body>
</html>

具体见 Layui 组件文档open in new window 中的快速上手

布局容器

固定宽度

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局容器</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    
  <div class="layui-container" style="background-color: navajowhite; height: 300px">
     固定宽度
  </div>
    
</body>
</html>

效果

完整宽度

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局容器</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <div class="layui-fluid" style="background-color: navajowhite; height: 300px">
    完整宽度
  </div>
</body>
</html>

效果

栅格系统

栅格布局规则

  1. 采用 layui-row 来定义行，如：

  2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

    • 变量 md 代表的是不同屏幕下的标记（可选值见下文）
    • 变量 ***** 代表的是该列所占用的 12 等分数（如 6/12），可选值为 1 - 12
    • 如果多个列的“等分数值”总和等于 12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

  3. 列可以同时出现最多 5 种不同的组合，分别是：xs / sm / md / lg / xl 2.8+，以在不同尺寸屏幕下进行自动适配。

  4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

  5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

示例

步骤：

  1. 定义布局容器

  2. 定义行 layui-row

  3. 定义列 layui-col-md*

    md 表示不同屏幕(手机，电脑，平板等)的标识(xs,sm,md,lg)

    *表示列的数量 总数为12 如果为5则表示占布局容器规则的5/12

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <!--布局容器-->
  <div class="layui-fluid">
    <!--定义行-->
    <div class="layui-row">
      <!--定义列-->
      <div class="layui-col-md5" style="background-color: #1E9FFF;height: 200px">
        内容占整个屏幕的5/12
      </div>
      <!--定义列-->
      <div class="layui-col-md7" style="background-color: #00FF00;height: 200px">
        内容占整个屏幕的7/12
      </div>
    </div>
  </div>
</body>
</html>

效果

其它详细内容(响应式规则 列间距 列偏移等)见 Layui 组件文档open in new window 中的栅格系统

按钮

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

不管是什么标签只要设定了class="layui-btn"就会建立一个按钮，其能和其它标签组合使用，如在a标签上加入就会形成一个a标签和按钮的组合既点击按钮则会跳转页面。

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-btn-container">
  <button type="button" class="layui-btn">默认按钮</button>
  <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
  <button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
  <button type="button" class="layui-btn layui-bg-red">红色按钮</button>
  <button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
  <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>

<div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
  <button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>
  <button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button>
  <button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button>
  <button class="layui-btn layui-btn-primary layui-border-purple">紫色按钮</button>
  <button class="layui-btn layui-btn-primary layui-border">普通按钮</button>
</div>
</body>
</html>

效果

其它详细内容(按钮尺寸 按钮圆角 按钮图标 按钮混搭 按钮组合 按钮容器)见 Layui 组件文档open in new window 中的按钮

图标

Layui 图标采用字体形式，取材于阿里巴巴矢量图标库 iconfont，因此可以把一个 icon 看作是一个普通的文本，直接通过 css 即可设定其样式。图标支持 font-class 或 unicode 两种格式。

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
  你可以去定义它的颜色或者大小，如：
  <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
</div>
</body>
</html>

效果

其它详细内容(图标列表)见 Layui 组件文档open in new window 中的图标

图标按钮

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i>添加
  </button>
</body>
</html>

效果

改变图标需要改变&#xe608的值其它图标对应的值见 Layui 组件文档open in new window 中的图标

导航

layui-nav-item 表示是导航的子项

layui-nav-child 表示的是二级菜单

layui-this 表示当前被选中的项

水平导航

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <script>
    layui.use('element',function () {
      var element = layui.element;
    })
  </script>

  <ul class="layui-nav">

    <li class="layui-nav-item layui-this">
      <a href="">选中</a>
    </li>

    <li class="layui-nav-item">
      <a href="javascript:">常规</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="">菜单1</a></dd>
        <dd><a href="">菜单2</a></dd>
        <dd><a href="">菜单3</a></dd>
      </dl>
    </li>

    <li class="layui-nav-item">
      <a href="javascript:">选项</a>
      <dl class="layui-nav-child">
        <dd><a href="">选项1</a></dd>
        <dd class="layui-this"><a href="">选项2</a></dd>
        <dd><a href="">选项3</a></dd>
      </dl>
    </li>

    <li class="layui-nav-item">
      <a href="">演示</a>
    </li>

  </ul>
</body>
</html>

效果

侧边导航

layui-nav-tree 加上是垂直导航不会占满侧边的全部

layui-nav-side 加上就是侧边导航会占满侧边的全部

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <script>
    layui.use('element',function () {
      var element = layui.element;
    })
  </script>

  <ul class="layui-nav layui-nav-tree layui-nav-side">

    <li class="layui-nav-item layui-this">
      <a href="">选中</a>
    </li>

    <li class="layui-nav-item">
      <a href="javascript:">常规</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="">菜单1</a></dd>
        <dd><a href="">菜单2</a></dd>
        <dd><a href="">菜单3</a></dd>
      </dl>
    </li>

    <li class="layui-nav-item">
      <a href="javascript:">选项</a>
      <dl class="layui-nav-child">
        <dd><a href="">选项1</a></dd>
        <dd class="layui-this"><a href="">选项2</a></dd>
        <dd><a href="">选项3</a></dd>
      </dl>
    </li>

    <li class="layui-nav-item">
      <a href="">演示</a>
    </li>

  </ul>
</body>
</html>

效果

其它详细内容(改变颜色 徽章 面包屑式导航)见 Layui 组件文档open in new window 中的导航

选项卡

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <script>
    layui.use('element',function () {
      var element = layui.element;
    })
  </script>

  <div class="layui-tab">
    <ul class="layui-tab-title">
      <li class="layui-this">标签1</li>
      <li>标签2</li>
      <li>标签3</li>
      <li>标签4</li>
      <li>标签5</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>

</body>
</html>

效果

其它详细内容(其它风格)见 Layui 组件文档open in new window 中的选项卡

表格

隔行换色 在table标签内加 lay-even

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--  <script>-->
<!--    layui.use('element',function () {-->
<!--      var element = layui.element;-->
<!--    })-->
<!--  </script>-->
  
  <table class="layui-table" lay-even>
    <colgroup>
      <col width="150">
      <col width="150">
      <col>
    </colgroup>
    <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
    <tr>
      <td>庄子</td>
      <td>华夏</td>
      <td>朴素而天下莫能与之争美</td>
    </tr>
    </tbody>
  </table>

</body>
</html>

效果

其它详细内容(设置边框 大小尺寸)见 Layui 组件文档open in new window 中的表格

表单

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--  <script>-->
<!--    layui.use('form',function () {-->
<!--      var form = layui.form;-->
<!--    })-->
<!--  </script>-->

  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">验证必填项</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">验证手机号</label>
        <div class="layui-input-inline layui-input-wrap">
          <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
        </div>
        <div class="layui-form-mid" style="padding: 0!important;">
          <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">验证码</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">验证邮箱</label>
        <div class="layui-input-inline">
          <input type="text" name="email" lay-verify="email" placeholder="有值时才校验" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">验证日期</label>
        <div class="layui-input-inline layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-date"></i>
          </div>
          <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">自定义验证</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="password" name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
      </div>
      <div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">数字输入框</label>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
          <input type="number" name="price_max" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">单行选择框</label>
      <div class="layui-input-block">
        <select name="interest" lay-filter="aihao">
          <option value=""></option>
          <option value="0">写作</option>
          <option value="1" selected>阅读</option>
          <option value="2">游戏</option>
          <option value="3">音乐</option>
          <option value="4">旅行</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">分组选择框</label>
        <div class="layui-input-inline">
          <select name="quiz">
            <option value="">请选择问题</option>
            <optgroup label="城市记忆">
              <option value="你工作的第一个城市">你工作的第一个城市</option>
            </optgroup>
            <optgroup label="学生时代">
              <option value="你的工号">你的工号</option>
              <option value="你最喜欢的老师">你最喜欢的老师</option>
            </optgroup>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">搜索选择框</label>
        <div class="layui-input-inline">
          <select name="modules" lay-verify="required" lay-search>
            <option value="">直接选择或搜索选择</option>
            <option value="1">layer</option>
            <option value="2">form</option>
            <option value="3">layim</option>
            <option value="4">element</option>
            <option value="5">laytpl</option>
            <option value="6">upload</option>
            <option value="7">laydate</option>
            <option value="8">laypage</option>
            <option value="9">flow</option>
            <option value="10">util</option>
            <option value="11">code</option>
            <option value="12">tree</option>
            <option value="13">layedit</option>
            <option value="14">nav</option>
            <option value="15">tab</option>
            <option value="16">table</option>
            <option value="17">select</option>
            <option value="18">checkbox</option>
            <option value="19">switch</option>
            <option value="20">radio</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">联动选择框</label>
      <div class="layui-input-inline">
        <select name="quiz1">
          <option value="">请选择省</option>
          <option value="浙江" selected>浙江省</option>
          <option value="你的工号">江西省</option>
          <option value="你最喜欢的老师">福建省</option>
        </select>
      </div>
      <div class="layui-input-inline">
        <select name="quiz2">
          <option value="">请选择市</option>
          <option value="杭州">杭州</option>
          <option value="宁波" disabled>宁波</option>
          <option value="温州">温州</option>
          <option value="温州">台州</option>
          <option value="温州">绍兴</option>
        </select>
      </div>
      <div class="layui-input-inline">
        <select name="quiz3">
          <option value="">请选择县/区</option>
          <option value="西湖区">西湖区</option>
          <option value="余杭区">余杭区</option>
          <option value="拱墅区">临安市</option>
        </select>
      </div>
      <div class="layui-form-mid layui-text-em">
        <i class="layui-icon layui-icon-tips" lay-tips="{
        content: '此处只是演示联动排版，并未做联动交互',
        margin: '0 0 0 -10px'
      }"></i>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
      <div class="layui-input-block">
        <input type="checkbox" name="arr[0]" title="选项1">
        <input type="checkbox" name="arr[1]" title="选项2" checked>
        <input type="checkbox" name="arr[2]" title="选项3">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">标签框</label>
      <div class="layui-input-block">
        <input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
        <input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
        <input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开关</label>
      <div class="layui-input-block">
        <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">单选框</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男" checked>
        <input type="radio" name="sex" value="女" title="女">
        <input type="radio" name="sex" value="禁" title="禁用" disabled>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">普通文本域</label>
      <div class="layui-input-block">
        <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>

  <script>
    layui.use(['form', 'laydate', 'util'], function(){
      var form = layui.form;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var util = layui.util;
  
      // 自定义验证规则
      form.verify({
        pass: function(value) {
          if (!/(.+){6,12}$/.test(value)) {
            return '密码必须 6 到 12 位';
          }
        }
      });
  
      // 指定开关事件
      form.on('switch(switchTest)', function(data){
        layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
          offset: '6px'
        });
        layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
      });
  
      // 提交事件
      form.on('submit(demo1)', function(data){
        var field = data.field; // 获取表单字段值
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        // 此处可执行 Ajax 等操作
        // …
        return false; // 阻止默认 form 跳转
      });
  
      // 日期
      laydate.render({
        elem: '#date'
      });
  
      // 普通事件
      util.on('lay-on', {
        // 获取验证码
        "get-vercode": function(othis){
          var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
          // 验证通过
          if(isvalid){
            layer.msg('手机号规则验证通过');
            // 此处可继续书写「发送验证码」等后续逻辑
            // …
          }
        }
      });
    });
  </script>

</body>
</html>

效果

其它详细内容(单选框 复选框 密码框等)见 Layui 组件文档open in new window 中的表单

弹出层

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

  <script>
    layui.use('layer',function () {
      var layer = layui.layer;
      layer.msg("Hello World!");
    })
  </script>

</body>
</html>

效果

其它详细内容(风格)见 Layui 组件文档open in new window 中的弹出层

日期与时间选择

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="layui-inline">
  <input type="text" class="layui-input" id="date1">
</div>

  <script>
    layui.use('laydate',function () {
      var laydate = layui.laydate;
      laydate.render({
        elem: "#date1"
      });
    })
  </script>

</body>
</html>

效果

其它详细内容见 Layui 组件文档open in new window 中的日期

分页

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LayUiStudy</title>
  <!-- 引入核心CSS文件 -->
  <link href="./css/layui.css" rel="stylesheet">
  <!-- 引入核心JS文件(采用模块化引入) -->
  <script src="./layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div id="page">

</div>

  <script>
    layui.use('laypage',function () {
      var laypage = layui.laypage;
      laypage.render({
        elem: "page",
        count: 100, // 一般是从服务器获取
        limit: 5 // 一页显示数默认为10
      })
    })
  </script>

</body>
</html>

效果

其它详细内容见 Layui 组件文档open in new window 中的分页

0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8
遇强则强，战力不详。
Copyright © 2024 TenSoFlow