layui⼊门案例(简单)引⾔:layui作为⼀款新兴ui组件库,主要⽤于后端开发的前端设计,我觉得⼗分好⽤,简洁美观⼤⽅
⾸先要下载layui官⽅⽂档的jar包
百度⽹盘链接:pan.baidu/s/1VP0I0tR_TbHnbs0GJ0gSFg
提取码:cg3e
js的jar包:
百度⽹盘链接:pan.baidu/s/1dFy6VKT4qu8PyL2uHUxU7w
提取码:424
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layout 后台⼤布局 - Layui</title>
<link rel="stylesheet" href="./layui/css/layui.css" />
<script src="./js/jquery-2.1.1.js"></script>
<script src="./layui/layui.all.js"></script>
</head>
<style>
body .mylayuicss{color:balck;}
</style>
<body>
<button class="layui-btn layui-sm btn">弹出⼀个dialog框</button>
<button class="layui-btn-normal layui-btn layui-sm btn2">弹出⼀个dialog框</button>
<script>
layui.use('layer', function () {//调⽤layui组件
var layer=layui.layer;
$=layui.jquery;
$(".btn").on('click',function(){//为按钮添加⼀个事件
layer.open({
title:'haha'//标题栏
,skin:'mylayuicss'
,content:'www.baidu'//内容
})
});
layui下载$(".btn2").on('click',function(){
layer.msg("nihao aa",{icon:1})
});
});
</script>
</body>
</html>
希望能给那些⼊门的爱好者做⼀个指引
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论