layui简单使用

经典模块化前端框架 (js引入模块,绑定dom直接使用)

1.官网下载解压使用
2.建立自己html文件
3.引入css和 js 直接使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/layui.css">
</head>
<body>
</body>
<script type="text/javascript" src="./layui.all.js"></script>
<script type="text/javascript">
  console.dir(layui);
  // layui.layer.msg("hello world");
  console.dir(layui.layer);
  layui.layer.alert("虾");
  layui.layer.confirm("蟹");
</script>
</html>

4.模块化使用 引入js不同
示例 日期模块使用

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

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/layui.css">
  <style>
    #box1 {
      height: 20px;
      width: 100px;
      background-color: aqua;
    }
  </style>
</head>
<input type="text" id="box">
<div id="box1"></div>
<body>
</body>
<script type="text/javascript" src="./layui.js"></script>
<script type="text/javascript">
  layui.use(['layer', 'laydate'], function (args) {
    var layer = layui.layer;
    var laydate = layui.laydate;

    laydate.render({
      elem: '#box' ,
      ready: function (date) {
        console.log("当前时间:", date);
      }
    })
    laydate.render({
      elem: '#box1',
      trigger: 'click' ,  //自定义弹出控件的事件
      done: function (value, date, endDate) {
          console.log("选择完毕"); 
      }
    })
  })
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容