layui初識

時間 2020-06-18

標籤 layui 简体版

原文原文鏈接

layui

是什麼？ css

是一個ui庫 UI設計（或稱界面設計）是指對軟件的人機交互、操做邏輯、界面美觀的總體設計。UI設計分爲實體UI和虛擬UI，互聯網經常使用的UI設計是虛擬UI，UI即User Interface(用戶界面)的簡稱。html

大體內容編輯器

觀察layui文件內的內部結構模塊化

├─css //css目錄字體

│ │─modules //模塊css目錄（通常若是模塊相對較大，咱們會單獨提取，好比下面三個：）ui

│ │ ├─laydatespa

│ │ ├─layer設計

│ │ └─layimorm

│ └─layui.css //核心樣式文件htm

├─font //字體圖標目錄

├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情）

│─lay //模塊核心目錄

│ └─modules //各模塊組件

│─layui.js //基礎核心庫

└─layui.all.js //包含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="../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>

認識layui：

模塊化

layui.use(['layer', 'form'], function(){
  var layer = layui.layer
 ,form = layui.form;
});

公共類：
- layui-icon 用於圖標
- layui-bg-red 用於設置元素赤色背景
公共屬性

屬性	描述
lay-skin=" "	定義相同元素的不一樣風格，如checkbox的開關風格
lay-filter=" "	事件過濾器。你可能會在不少地方看到他，他通常是用於監聽特定的自定義事件。你能夠把它看做是一個ID選擇器
lay-submit	定義一個觸發表單提交的button，不用填寫值