LayUI基本介紹

LayUI 是阿里大神賢心的核心技術作品 採用經典模塊化,也正是能讓人避開工具的複雜配置,迴歸到簡單而原生態的HTML/CSS/JavaScript layerlayer 至今仍作爲 layui 的代表作 sea.js 在 SeaJS 的世界裏,一個文件就是一個模塊。所有模塊都遵循 CMD 規範,我們可以像在 Node 環境中一樣來書寫模塊代碼

快速上手

獲得 layui 後,將其完整地部署到你的項目目錄(或靜態資源服務器),你只需要引入下述兩個文件:

./layui/css/layui.css
./layui/layui.js <!--如果是採用非模塊化方式可換成:./layui/layui.all.js-->

模塊化方式

<!-- 你的HTML代碼 -->
<script src="../layui/layui.js"></script>
<script>
    //一般直接寫在一個js文件中
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
        ,form = layui.form;
        layer.msg('Hello World');
    });
</script>

非模塊化方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>非模塊化方式使用layui</title><link rel="stylesheet" href="../layui/css/layui.css"></head>
<body>
<!-- 你的HTML代碼 -->
<script src="../layui/layui.all.js"></script><script>
    //由於模塊都一次性加載,因此不用執行 layui.use() 來加載對應模塊,直接使用即可:
    ;!function(){
        var layer = layui.layer
        ,form = layui.form;
        layer.msg('Hello World');
    }();
</script>
</body>
</html>
  • 引入自定義插件
layui.config({
    base: '../../static/common/yutons-mods/' //根據實際路徑設置自定義插件路徑
}).use(['yutons_sug'], function() {});


layui.config({
    base: './module/'  
}).extend({
    iconPicker: 'iconPicker/iconPicker'  //實際路徑 ./module/iconPicker/iconPicker.js
});
  • 渲染更新
form.render(); //更新全部
//或者
form.render('select'); //刷新select選擇框渲染
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態

//注意一下 layui版本
layui.form().render(); //這是1.0的寫法
layui.form.render(); //這是2.0更新後的寫法
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章