LayUI

時間 2021-05-22

原文原文鏈接

LayUI

主要內容

LayUI 的安裝及使用

LayUI 的介紹

layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。css

由國人開發，16年出廠的框架，其主要提供了不少好看、方便的樣式，而且基本拿來即用，和Bootstrap有些類似，但該框架有個極大的好處就是定義了不少先後端交互的樣式接口，如分頁表格，只需在前端配置好接口，後端則按照定義好的接口規則返回數據，便可完成頁面的展現，極大減小了後端人員的開發成本。 html

官網：https://www.layui.com前端

官方文檔：https://www.layui.com/doc/後端

LayUI 的特色

（1）layui屬於輕量級框架，簡單美觀。適用於開發後端模式，它在服務端頁面上有很是好的效果。框架

（2）layui是提供給後端開發人員的ui框架，基於DOM驅動。編輯器

下載與使用

在官網首頁下載到 layui 的最新版。目錄結構以下：模塊化

├─css // css目錄
  │  │─modules // 模塊css目錄（通常若是模塊相對較大，咱們會單獨提取，好比下面三個：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 核心樣式文件
  ├─font  // 字體圖標目錄
  ├─images // 圖片資源目錄（目前只有layim和編輯器用到的GIF表情）
  │─lay // 模塊核心目錄
  │  └─modules // 各模塊組件
  │─layui.js // 基礎核心庫
  └─layui.all.js // 包含layui.js和全部模塊的合併文件

得到 layui 後，將其完整地部署（拷貝到項目中）到你的項目目錄，你只須要引入下述兩個文件：

./layui/css/layui.css
./layui/layui.js // 提示：若是是採用非模塊化方式，此處可換成：./layui/layui.all.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="layui/css/layui.css">
</head>
<body>
 
<!-- 你的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> 
</body>
</html>

還須要聲明須要使用的模塊和 回調函數。參照官方文檔，選擇本身想要的效果就行。函數

好比：字體

<script>
    // 注意：導航 依賴 element 模塊，不然沒法進行功能性操做
    layui.use('element', function(){
          var element = layui.element;

          //…
    });
</script>

加VX瞭解點我掃碼領取ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。