layui初識_ZenDei技術網路在線

layui初識

-Advertisement-

layui 是什麼？是一個ui庫 UI設計（或稱界面設計）是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI，互聯網常用的UI設計是虛擬UI，UI即User Interface(用戶界面)的簡稱。大致內容觀察layui文件內的內部結構 ├─css //css目錄 ...

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="../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，不用填寫值

頁面元素 (靜態)
1. 只與HTML有關，樣式通通通過layui的公共類來實現
內置模塊 (動態)
- 屬性
- 方法
- 事件

[其他的就需要自己去查，最好把常用的元素以及模塊用熟，但是不熟悉也不要緊]

Example
1. 表單 form -form
2. 導航欄/選項卡 element --->nav/tab
3. 數據表格 table--->table
4. 彈窗 layer

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

詳細整理iOS中UITableView的性能優化

最近在微博上看到一個很好的開源項目，是關於如何優化UITableView的，加上正好最近也在優化項目中的類似朋友圈功能這塊，思考了很多關於UITableView的優化技巧，所以決定詳細的整理下對優化UITableView的理解，需要的朋友們可以參考借鑒。一、介紹 iOS開發中，UITableVie ...
android.widget.TextView.setText() on a null object reference

java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setText(java.lang.CharSequence)' on a null object ...
vue-router源碼閱讀(一) 內部探究

vue-router源碼閱讀(一) 內部探究，介紹vue-router的執行順序，new VueRouter({options})時做了什麼，new Vue({ router })內部又做了什麼等等。 ...
node.js的安裝與配置

1 下載node.js 下載地址：https://nodejs.org/zh-cn/download/ 選擇對應系統的安裝包進行下載，本次安裝得是windows 64位系統（32位下載中會有一個X86這表示系統架構的意思。） 2 安裝Node.js 找到下載的安裝包，點擊進行安裝。上面四個選項的意 ...
JS乾貨分享—-this指向

平時用this有些混亂，所以寫個總結。沒有箭頭函數之前，我們說this就是函數運行時所在的環境對象，但是在箭頭函數中this就是定義時所在的對象，先說大家熟知的：函數運行時所在的環境對象。 1、作為函數調用，this指向全局對象 2、作為對象的方法調用，該對象即為調用上下文，this指向該對象。 ...
iview DatePicker daterange data month UTC格式化問題

iview DatePicker daterange data month UTC格式化問題 ...
npm install 裝包時提示Error EACCES permission denied解決辦法

npm install 裝包時提示Error EACCES permission denied解決辦法 ...
echarts餅狀統計圖、柱狀統計圖

1 <div class="pie" style="width:500px;height:500px;"></div> 2 3 <div class="line" style="width:500px;height:500px;"></div> 4 5 <script type="text/java ...