guorui
/
html_learn


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - Layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn">后来尽快赶回来接口连接</button>

</div>

<button type="button" class="layui-btn-radius layui-bg-blue">jklhu</button>


<div class="layui-container">
  <div class="layui-progress" style="margin: 15px 0 30px;">
    <div class="layui-progress-bar" lay-percent="100%"></div>
  </div>
  
  
  <div class="layui-btn-container">
    <button class="layui-btn" test-active="test-form">一个按钮</button>
    <button class="layui-btn layui-btn-normal" id="test2">当前日期</button>
  </div>
  
  <blockquote class="layui-elem-quote" style="margin-top: 30px;">
    <div class="layui-text">
      <ul>
        <li>您当前预览的是：<span>Layui-v<span id="version"></span></span></li>
        <li>Layui 是一套开源免费的 Web UI（界面）组件库。这是一个极其简洁的演示页面</li>
      </ul>
    </div>
  </blockquote>
</div>

<!-- body 末尾处引入 layui -->
<script src="layui/layui.js"></script>
<script>
layui.use(function(){
  var layer = layui.layer;
  var form = layui.form;
  var laydate = layui.laydate;
  var util = layui.util;
  
  // 欢迎信息
  layer.msg('Hello World', {icon: 6});
  
  // 输出版本号
  lay('#version').html(layui.v);
  
  // 日期
  laydate.render({
    elem: '#test2',
    value: new Date(),
    isInitValue: true
  });
  
  // 触发事件
  util.on('test-active', {
    'test-form': function(){
      layer.open({
        type: 1,
        resize: false,
        shadeClose: true,
        area: '350px',
        title: 'layer + form',
        content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">',
          '<li class="layui-form-item">',
            '<label class="layui-form-label">输入框</label>',
            '<div class="layui-input-block">',
              '<input class="layui-input" lay-verify="required" name="field1">',
            '</div>',
          '</li>',
          '<li class="layui-form-item">',
            '<label class="layui-form-label">选择框</label>',
            '<div class="layui-input-block">',
              '<select name="field2">',
                '<option value="A">A</option>',
                '<option value="B">B</option>',
              '<select>',
            '</div>',
          '</li>',
          '<li class="layui-form-item" style="text-align:center;">',
            '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>',
          '</li>',
        '</ul>'].join(''),
        success: function(layero, index){
          layero.find('.layui-layer-content').css('overflow', 'visible');
          
          form.render().on('submit(*)', function(data){
            var field = data.field;
            
            // 显示填写的表单
            layer.msg(util.escape(JSON.stringify(field)), {
              icon: 1
            });
            // layer.close(index); //关闭层
          });
        }
      });
    }
  });
});
</script>
</body>
</html>