layui入門總結-Layui教程-PHP中文網

首頁

web前端

Layui教程

layui入門總結

尚

Nov 27, 2019 am 11:56 AM

layui

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([&#39;layer&#39;, &#39;form&#39;], function(){
          var layer = layui.layer
          ,form = layui.form();
          
           layer.msg(&#39;Hello World&#39;);
          
        });
        
    </script> 
    </body>
</html>

登入後複製

規範化的用法（推薦）

如果你想快速使用Layui的元件，你還是跟平常一樣script標籤引入你的js文件，然後在你的js檔案中使用layui的元件。但我們更推薦你遵循Layui的模組規範，建立一個自己的模組作為入口：

<script>
layui.config({
  base: &#39;/res/js/modules/&#39; //你的模块目录
}).use(&#39;index&#39;); //加载入口
</script>

登入後複製

上述的index 即為你/res/js/modules/ 目錄下的index.js，它的內容應該如下：

<script>
/**
  项目JS主入口
  以依赖Layui的layer和form模块为例
**/    
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg(&#39;Hello World&#39;);
  
  exports(&#39;index&#39;, {}); //注意，这里是模块输出的核心，模块名必须和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入門總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1322

PHP教程

1270

C# 教程

1249

Related knowledge

layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法，包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數，以及監聽表單提交事件獲取資料。

layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素，提供預製元件簡化頁面建置；而Vue則是全端框架，注重資料綁定、元件化開發和狀態管理，更適合建構複雜應用程式。 layui學習簡單，適合快速建立頁面；Vue學習曲線陡峭，但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平，可以選擇合適的框架。

layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能，可以實現自適應佈局。步驟包括：引用layui框架。定義自適應佈局容器，設定layui-container類別。使用響應式斷點（xs/sm/md/lg）隱藏特定斷點下的元素。利用網格系統（layui-col-）指定元素寬度。透過偏移量（layui-offset-）建立間距。使用響應式實用工具（layui-invisible/show/block/inline）控制元素的可見性和顯示方式。

layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架，提供了一套易用的UI元件和工具，幫助開發者快速建立響應式網路應用程式。其特點包括：模組化、輕量級、響應式，並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便，缺點是客製化較差、技術更新較慢。