1. 程式人生 > >layui入門案例(簡單)

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>

希望能給那些入門的愛好者做一個指引