在线测试 - Layui

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Playground</title>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
  </head>
  <body>
    <blockquote class="layui-elem-quote layui-text" id="version">
      当前版本: Layui-v{{= layui.v }}
    </blockquote>
     
    <table class="layui-hide" id="ID-test-table"></table>
     
    <script type="text/html" id="ID-demo-table-tool">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
    </script>
     
    <div class="layui-tab layui-tab-brief" lay-filter="filter-test-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">
          <div class="layui-carousel" id="ID-test-carousel">
            <style>.demo-carousel{height: 200px; line-height: 200px; text-align: center;}</style>
            <div carousel-item>
              <div><p class="demo-carousel">在这里，您将以最直观的形式体验 Layui</p></div>
              <div><p class="layui-bg-red demo-carousel">在编辑器中输入 Layui 相关的代码</p></div>
              <div><p class="layui-bg-green demo-carousel">也可以结合 Layui 官方文档来此处进行示例演示</p></div>
            </div>
          </div>
        </div>
        <div class="layui-tab-item">
          <div id="ID-test-laydate"></div>
        </div>
        <div class="layui-tab-item">
          <div id="ID-test-laypage"></div>
        </div>
        <div class="layui-tab-item">
          <div class="layui-upload-drag" id="ID-test-upload">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="ID-test-upload-view">
              <hr>
              <img src="" alt="上传成功后渲染" style="max-width: 100%">
            </div>
          </div>
        </div>
        <div class="layui-tab-item">
          <div id="ID-test-slider" style="margin: 52px 18px;"></div>
        </div>
      </div>
    </div>
      
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script>
    layui.use(function() {
      // 获得需要的内置组件
      var layer = layui.layer; // 弹层
      var laypage = layui.laypage; // 分页
      var laydate = layui.laydate; // 日期
      var table = layui.table; // 表格
      var carousel = layui.carousel; // 轮播
      var upload = layui.upload; // 上传
      var element = layui.element; // 元素操作
      var slider = layui.slider; // 滑块
      var dropdown = layui.dropdown; // 下拉菜单
      
      // 向世界问个好
      layer.msg('Hello World');
      
      // Tab 切换
      element.on('tab(filter-test-tab)', function(data) {
        layer.tips('切换了 '+ data.index +' : '+ this.innerHTML, this, {
          tips: 1
        });
      });
      
      // 执行一个 table 实例
      table.render({
        elem: '#ID-test-table',
        height: 420,
        url: '/static/json/2/table/user.json', // 数据接口（此处为静态数据，仅作演示）
        title: '用户表',
        page: true, // 开启分页
        toolbar: 'default', // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        totalRow: true, // 开启合计行
        cols: [[ // 表头
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRow: '合计 : '},
          {field: 'username', title: '用户名', width:80},
          {field: 'experience', title: '积分', width: 90, sort: true, totalRow: '{{= d.TOTAL_NUMS }}'},
          {field: 'sex', title: '性别', width:80, sort: true},
          {field: 'score', title: '评分', width: 80, sort: true, totalRow: true},
          {field: 'city', title: '城市', width:150},
          {field: 'sign', title: '签名', minWidth: 200},
          {field: 'classify', title: '职业', width: 100},
          {field: 'words', title: '字数', width: 135, sort: true, totalRow: true},
          {fixed: 'right', title: '操作', width: 150, align:'center', toolbar: '#ID-demo-table-tool'}
        ]]
      });
      
      // 头工具栏事件
      table.on('toolbar(ID-test-table)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data; // 获取选中的数据
        
        switch(obj.event){
          case 'add':
            layer.msg('添加');
          break;
          case 'update':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else if(data.length > 1) {
              layer.msg('只能同时编辑一个');
            } else {
              layer.alert('编辑 [id] : '+ checkStatus.data[0].id);
            }
          break;
          case 'delete':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else {
              layer.msg('删除');
            }
          break;
        };
      });
      
      // 单元格工具事件
      table.on('tool(ID-test-table)', function(obj) {
        var data = obj.data; // 获得当前行数据
        var layEvent = obj.event; // 获得 lay-event 对应的值
        
        if (layEvent === 'detail') {
          layer.msg('查看操作');
        } else if(layEvent === 'more') {
          // 下拉菜单
          dropdown.render({
            elem: this, // 触发事件的 DOM 对象
            show: true, // 外部事件触发即显示
            data: [{
              title: '编辑',
              id: 'edit'
            }, {
              title: '删除',
              id: 'del'
            }],
            click: function(menudata){
              if (menudata.id === 'del') {
                layer.confirm('真的删除行么', function(index) {
                  obj.del(); // 删除对应行（tr）的DOM结构
                  layer.close(index);
                  // 向服务端发送删除指令
                });
              } else if(menudata.id === 'edit') {
                layer.msg('编辑操作，当前行 ID:'+ data.id);
              }
            },
            align: 'right', // 右对齐弹出
            style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
          })
        }
      });
      
      // 执行一个轮播实例
      carousel.render({
        elem: '#ID-test-carousel',
        width: '100%', // 设置容器宽度
        height: 200,
        arrow: 'none', // 不显示箭头
        anim: 'fade' // 切换动画方式
      });
      
      // 将日期直接嵌套在指定容器中
      var dateIns = laydate.render({
        elem: '#ID-test-laydate',
        position: 'static',
        calendar: true, // 是否开启公历重要节日
        mark: { // 标记重要日子
          '0-10-14': '生日',
          '2016-10-14': '首版',
          '2017-08-21': '2.0',
          '2100-01-01': '新纪'
        },
        done: function(value, date, endDate) {
          if(date.date == 1){
            dateIns.hint('这个月的第一天');
          }
        },
        change: function(value, date, endDate) {
          layer.msg(value)
        }
      });
      
      // 分页
      laypage.render({
        elem: 'ID-test-laypage', // 分页容器的id
        count: 1000, // 数据总数
        limit: 10, // 每页显示的数据条数
        skin: '#1E9FFF', // 自定义选中色值
        // layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'], // 自定义排版
        jump: function(obj, first) {
          if (!first) {
            layer.msg('第'+ obj.curr +'页', {offset: 'b'});
          }
        }
      });
      
      // 上传
      upload.render({
        elem: '#ID-test-upload',
        url: '', // 若需模拟上传过程，而不真实上传文件，可使用开源的 HTTP 模拟接口: https://httpbin.org/post
        done: function(res) {
          layer.msg('上传成功');
          layui.$('#ID-test-upload-view').removeClass('layui-hide').find('img').attr('src', res.files.file);
          console.log(res)
        },
        before: function() {
          layer.msg('上传中', {icon: 16, time: 0});
        }
      });
      
      // 滑块
      slider.render({
        elem: '#ID-test-slider',
        input: true // 输入框
      });
      
      // 显示 Layui 版本
      var versionTPL = lay('#version')[0].innerHTML;
      lay('#version').html(layui.laytpl(versionTPL).render({}))
    });
    </script>
  </body>
</html>

Preview