layui入門案例(簡單)
引言:layui作為一款新興ui元件庫,主要用於後端開發的前端設計,我覺得十分好用,簡潔美觀大方
首先要下載layui官方文件的jar包
百度網盤連結:https://pan.baidu.com/s/1VP0I0tR_TbHnbs0GJ0gSFg
提取碼:cg3e
js的jar包:
百度網盤連結:https://pan.baidu.com/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:'http://www.baidu.com'//內容
})
});
$(".btn2").on('click',function(){
layer.msg("nihao aa",{icon:1})
});
});
</script>
</body>
</html>
希望能給那些入門的愛好者做一個指引