layui
是什么？
是一個ui庫 UI設計（或稱界面設計）是指對軟體的人機互動、操作邏輯、界面美觀的整體設計，UI設計分為物體UI和虛擬UI，互聯網常用的UI設計是虛擬UI，UI即User Interface(用戶界面)的簡稱，
大致內容
-
觀察layui檔案內的內部結構
├─css //css目錄
│ │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心樣式檔案
├─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=https://www.cnblogs.com/xiaoNYH/p/"../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代碼 -->
<script src=https://www.cnblogs.com/xiaoNYH/p/"../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，不用填寫值 |
-
頁面元素 (靜態)
-
只與HTML有關，樣式通通通過layui的公共類來實作
-
-
內置模塊 (動態)
-
屬性
-
方法
-
事件
-
-
Example
-
表單 form -form
-
導航欄/選項卡 element --->nav/tab
-
資料表格 table--->table
-
彈窗 layer
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63861.html
標籤：JavaScript