天天看點

layui-概念-入門-總結

layui教程:http://www.dosrun.com/layui/ 

獲得 Layui

你可以在官網首頁下載下傳到 Layui 的最新版,也可以通過 GitHub 得到Layui的開源包。目前隻同步維護這兩處資源管道。一般如果你是用于實際項目,推薦你直接從官網下載下傳。layui建構後的結構(也就是你獲得的包)

├─css   //css目錄
    │  └─modules   //子產品css目錄(一般如果子產品相對較大,我們會單獨提取)
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font    //字型圖示目錄
    ├─images   //圖檔資源目錄(一些表情等)
    │  └─face
    └─lay    //JS目錄
    │   ├─dest   //經過合并的完整子產品
    │   └─modules   //各子產品/元件
    └─layui.js      

快速上手

獲得layui後,将其完整地部署到你的項目目錄(或靜态資源伺服器),你隻需要引入下述兩個檔案:

./layui/css/layui.css
./layui/layui.js      

沒錯,不用去管其它任何檔案。因為他們(比如各子產品)都是在最終使用的時候才會自動加載。這是一個基本的入門頁面:

<!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="build/css/layui.css">
    </head>
    <!-- 你的HTML代碼 -->
    <script src="build/layui.js"></script>
    <script>
        //一般直接寫在一個js檔案中
        layui.use(['layer', 'form'], function(){
          var layer = layui.layer
          ,form = layui.form();
          
           layer.msg('Hello World');
          
        });
        
    </script> 
    </body>
</html>      

規範化的用法(推薦)

如果你想快速使用Layui的元件,你還是跟平時一樣script标簽引入你的js檔案,然後在你的js檔案中使用layui的元件。但我們更推薦你遵循Layui的子產品規範,建立一個自己的子產品作為入口:

<script>
layui.config({
  base: '/res/js/modules/' //你的子產品目錄
}).use('index'); //加載入口
</script>      

上述的 index 即為你 /res/js/modules/ 目錄下的 index.js,它的内容應該如下:

<script>
/**
  項目JS主入口
  以依賴Layui的layer和form子產品為例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg('Hello World');
  
  exports('index', {}); //注意,這裡是子產品輸出的核心,子產品名必須和use時的子產品名一緻
});    
</script>       

簡單粗暴用法

如果你覺得Layui的子產品化還是有點啰嗦,木有關系的親。Layui考慮到了像你一樣的猿群,我們将layui.js及所有子產品單獨打包合并成了一個完整的js檔案,用的時候直接引入這一個檔案即可。當你采用這樣的方式,你無需再通過layui.use加載子產品,直接使用即可,如:

<script src="../layui/lay/dest/layui.all.js"></script>  
<script>
;!function(){
  //當使用了 layui.all.js,無需再執行layui.use()方法
  var from = layui.form()
  ,layer = layui.layer;
  
  //…
}();
</script>      

但你必須知道,這種使用方式,意味着Layui的子產品化已經失去了它的意義。但不可否認,它比什麼都來的簡單。

好了,不管你采用什麼樣的方式,從現在開始,盡情地使用Layui吧!

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

layui是一個前端架構。layui.layer-是其下的一個彈層元件 :參考http://www.dosrun.com/layui/  首頁介紹-概念(分類)!

layui-概念-入門-總結

更多關于layui.layer-彈出層元件内容參見:http://www.cnblogs.com/xiangru0921/p/6728768.html

更多layui元件内容參見:http://www.dosrun.com/layui/

=========================================================================

更多内容參見:http://www.dosrun.com/layui/layui-intro.html

轉載于:https://www.cnblogs.com/xiangru0921/p/6732196.html

繼續閱讀