经典模块化前端框架 （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>
网友评论