LayUI的安裝及使用
LayUI
主要內容javascript
----LayUI 的安裝及使用
LayUI 的介紹
layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。css
由國人開發，16年出廠的框架，其主要提供了不少好看、方便的樣式，而且基本拿來即用，和Bootstrap有些類似，但該框架有個極大的好處就是定義了不少先後端交互的樣式接口，如分頁表格，只需在前端配置好接口，後端則按照定義好的接口規則返回數據，便可完成頁面的展現，極大減小了後端人員的開發成本。html
官網：https://www.layui.com前端
官方文檔：https://www.layui.com/doc/java
LayUI 的特色
（1）layui屬於輕量級框架，簡單美觀。適用於開發後端模式，它在服務端頁面上有很是好的效果。jquery
（2）layui是提供給後端開發人員的ui框架，基於DOM驅動。json
下載與使用
在 官網首頁 下載到 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>
頁面元素
佈局
佈局容器
固定寬度
將柵格放入一個帶有 class=「layui-container」 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。
<div class="layui-container">
<div class="layui-row">
……
</div>
</div>
完整寬度
能夠不固定容器寬度。將柵格或其它元素放入一個帶有 class=「layui-fluid」 的容器中，那麼寬度將不會固定，而是 100% 適應
<div class="layui-fluid"> …… </div>
柵格系統
爲了豐富網頁佈局，簡化 HTML/CSS 代碼的耦合，並提高多終端的適配能力，layui 引進了一套具有響應式能力的柵格系統。將容器進行了 12 等分，預設了 4*12 種 CSS 排列類，它們在移動設備、平板、桌面中/大尺寸四種不一樣的屏幕下發揮着各自的做用。
柵格佈局規則
採用 layui-row 來定義行，如：
<div class="layui-row"></div>
採用相似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：
- 變量 md 表明的是不一樣屏幕下的標記
- 變量 * 表明的是該列所佔用的12等分數（如6/12），可選值爲 1 - 12
- 若是多個列的「等分數值」總和等於12，則恰好滿行排列。若是大於12，多餘的列將自動另起一行。
- 列能夠同時出現最多四種不一樣的組合，分別是：_xs_（超小屏幕，如手機）、_sm_（小屏幕，如平板）、_md_（桌面中等屏幕）、_lg_（桌面大型屏幕）。
- 可對列追加相似 layui-col-space5_、 _layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。
- 能夠在列（column）元素中放入你本身的任意元素填充內容
示例：
<h3>常規佈局（以中型屏幕桌面爲例）：</h3>
<div class="layui-row">
<div class="layui-col-md9" style="background-color: #00F7DE;">
你的內容 9/12
</div>
<div class="layui-col-md3" style="background-color: rosybrown;">
你的內容 3/12
</div>
</div>
響應式規則
柵格的響應式能力，得益於CSS3媒體查詢（Media Queries）的強力支持，從而針對四類不一樣尺寸的屏幕，進行相應的適配處理。
超小屏幕 (手機<768px)
小屏幕 (平板≥768px)
中等屏幕 (桌面≥992px)
大型屏幕(桌面≥1200px)
_.layui-container_的值
auto
750px
970px
1170px
標記
xs
sm
md
lg
列對應類 * 爲1-12的等分數值
layui-col-xs*
layui-col-sm*
layui-col-md*
layui-col-lg*
總列數
12
12
12
12
響應行爲
始終按設定的比例水平排列
在當前屏幕下水平排列，若是屏幕大小低於臨界值則堆疊排列
在當前屏幕下水平排列，若是屏幕大小低於臨界值則堆疊排列
在當前屏幕下水平排列，若是屏幕大小低於臨界值則堆疊排列
<h3>平板、桌面端的不一樣表現：</h3>
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
</div>
</div>
列邊距
經過「列間距」的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還能夠進一步保證分列的寬度精細程度。咱們結合網頁經常使用的邊距，預設了 12 種不一樣尺寸的邊距，分別是：
/* 支持列之間爲 1px-30px 區間的全部雙數間隔，以及 1px、5px、15px、25px 的單數間隔 */ layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30
示例：
<h3>列間距</h3>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4" >
<!-- 須要在layui-col-md4裏面再加一層div -->
<div style="background-color: #009688;">
1/3
</div>
</div>
<div class="layui-col-md4">
<div style="background-color: burlywood;">
1/3
</div>
</div>
<div class="layui-col-md4">
<div style="background-color: silver;">
1/3
</div>
</div>
</div>
注：
1. layui-col-space：設置後不起做用主要是由於**設置的是padding**,也就是說是**向內縮**，因此設置背景色padding也是會添上顏色，看起來好像沒有間距同樣。能夠在裏面在加一個div，來達到目的。 2. 間距通常不高於30px，若是超過30，建議使用列偏移。
列偏移
對列追加 相似 layui-col-md-offset 的預設類，從而讓列向右偏移。其中 號表明的是偏移佔據的列數，可選中爲 1 - 12。
如：_layui-col-md-offset3_，即表明在「中型桌面屏幕」下，讓該列向右偏移 3 個列寬度
<h3>列偏移</h3>
<div class="layui-row">
<div class="layui-col-md4" style="background-color: rosybrown;">
4/12
</div>
<div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;">
偏移4列，從而在最右
</div>
</div>
注：列偏移可針對不一樣屏幕的標準進行設定，在當前設定的屏幕下有效，當低於桌面屏幕的規定的臨界值，就會堆疊排列。
列嵌套
能夠對柵格進行無窮層次的嵌套。在列元素（_layui-col-md*_）中插入行元素（_layui-row_），便可完成嵌套。
<h3>列嵌套</h3>
<div class="layui-row layui-col-space5">
<div class="layui-col-md5" style="background-color: thistle;">
<div class="layui-row">
<div class="layui-col-md3" style="background-color: burlywood;" >
內部列
</div>
<div class="layui-col-md5" style="background-color: indianred;">
內部列
</div>
<div class="layui-col-md4" style="background-color: mediumaquamarine;">
內部列
</div>
</div>
</div>
</div>
基本元素
按鈕
用法
向任意HTML元素設定_class=「layui-btn」_，創建一個基礎按鈕。經過追加格式爲layui-btn-{type}的class來定義其它按鈕風格。
<!-- 基礎按鈕 --> <button type="button" class="layui-btn">一個標準的按鈕</button> <a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a> <div class="layui-btn">一個按鈕</div>
主題
名稱
組合
原始
class=「layui-btn layui-btn-primary」
默認
class=「layui-btn」
百搭
class=「layui-btn layui-btn-normal」
暖色
class=「layui-btn layui-btn-warm」
警告
class=「layui-btn layui-btn-danger」
禁用
class=「layui-btn layui-btn-disabled」
示例：
<!-- 不一樣主題的按鈕 --> <button class="layui-btn">默認按鈕</button> <button class="layui-btn layui-btn-primary">原始按鈕</button> <button class="layui-btn layui-btn-normal">百搭按鈕</button> <button class="layui-btn layui-btn-warm">暖色按鈕</button> <button class="layui-btn layui-btn-danger">警告按鈕</button> <button class="layui-btn layui-btn-disabled">禁用按鈕</button>
尺寸
尺寸
組合
大型
class=「layui-btn layui-btn-lg」
默認
class=「layui-btn」
小型
class=「layui-btn layui-btn-sm」
迷你
class=「layui-btn layui-btn-xs」
<!-- 不一樣尺寸的按鈕 --> <button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> <button class="layui-btn">默認</button> <button class="layui-btn layui-btn-sm layui-btn-danger">小型</button> <button class="layui-btn layui-btn-xs">迷你</button>
圓角
layui-btn-radius
<button class="layui-btn layui-btn-radius">默認按鈕</button> <button class="layui-btn layui-btn-primary layui-btn-radius">原始按鈕</button> <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按鈕</button> <button class="layui-btn layui-btn-warm layui-btn-radius">暖色按鈕</button> <button class="layui-btn layui-btn-danger layui-btn-radius">警告按鈕</button> <button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按鈕</button>
圖標
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i> 刷新
</button>
導航
導航通常指頁面引導性頻道集合，多以菜單的形式呈現，可應用於頭部和側邊。麪包屑結構簡單，支持自定義分隔符。
依賴加載模塊：element
實現步驟：
引入的資源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
依賴加載模塊
<script type="text/javascript"> // 注意：導航 依賴 element 模塊，不然沒法進行功能性操做 layui.use('element', function(){ var element = layui.element; }); </script>- 顯示指定類型的導航
水平導航
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活動</a></li>
<li class="layui-nav-item layui-this"><a href="">產品</a></li>
<li class="layui-nav-item"><a href="">大數據</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child"> <!-- 二級菜單 -->
<dd><a href="">移動模塊</a></dd>
<dd><a href="">後臺模版</a></dd>
<dd><a href="">電商平臺</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社區</a></li>
</ul>
垂直/側邊導航
<ul class="layui-nav layui-nav-tree" >
<!-- 側邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認展開</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">選項1</a></dd>
<dd><a href="javascript:;">選項2</a></dd>
<dd><a href="">跳轉</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動模塊</a></dd>
<dd><a href="">後臺模版</a></dd>
<dd><a href="">電商平臺</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">產品</a></li>
<li class="layui-nav-item"><a href="">大數據</a></li>
</ul>
水平、垂直、側邊三個導航的HTML結構是徹底同樣的，不一樣的是：
水平導航：layui-nav 垂直導航須要追加class：layui-nav-tree 側邊導航須要追加class：layui-nav-tree layui-nav-side
導航主題
經過對導航追加CSS背景類，讓導航呈現不一樣的主題色
<!-- 如定義一個墨綠背景色的導航 --> <ul class="layui-nav layui-bg-move" > … </ul>
水平導航支持的其它背景主題有：_layui-bg-cyan_（藏青）、_layui-bg-molv_（墨綠）、_layui-bg-blue_（豔藍）
垂直導航支持的其它背景主題有：_layui-bg-cyan_（藏青）
麪包屑
<span class="layui-breadcrumb"> <a href="">首頁</a> <a href="">國際新聞</a> <a href="">亞太地區</a> <a><cite>正文</cite></a> </span>
你還能夠經過設置屬性 lay-separator="" 來自定義分隔符。例如：
<span class="layui-breadcrumb" lay-separator="-"> <a href="">首頁</a> <a href="">國際新聞</a> <a href="">亞太地區</a> <a><cite>正文</cite></a> </span>
選項卡
導航菜單可應用於頭部和側邊，支持響應式，支持刪除選項卡等功能。
依賴加載模塊：element
實現步驟
引入的資源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
依賴加載模塊
<script type="text/javascript"> // 注意：選項卡 依賴 element 模塊，不然沒法進行功能性操做 layui.use('element', function(){ var element = layui.element; }); </script>加載HTML
<div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">網站設置</li> <li>用戶管理</li> <li>權限分配</li> <li>商品管理</li> <li>訂單管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">內容1</div> <div class="layui-tab-item">內容2</div> <div class="layui-tab-item">內容3</div> <div class="layui-tab-item">內容4</div> <div class="layui-tab-item">內容5</div> </div> </div>
選項卡風格
默認風格：layui-tab 簡潔風格須要追加class：layui-tab-brief 卡片風格須要追加class：layui-tab-card
帶刪除的選項卡
能夠對父層容器設置屬性 lay-allowClose=「true」 來容許Tab選項卡被刪除
<div class="layui-tab" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">網站設置</li>
<li>用戶管理</li>
<li>權限分配</li>
<li>商品管理</li>
<li>訂單管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">內容1</div>
<div class="layui-tab-item">內容2</div>
<div class="layui-tab-item">內容3</div>
<div class="layui-tab-item">內容4</div>
<div class="layui-tab-item">內容5</div>
</div>
</div>
表格
常規用法
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>暱稱</th>
<th>加入時間</th>
<th>簽名</th>
</tr>
</thead>
<tbody>
<tr>
<td>賢心</td>
<td>2016-11-29</td>
<td>人生就像是一場修行</td>
</tr>
<tr>
<td>許閒心</td>
<td>2016-11-28</td>
<td>於千萬人之中碰見你所碰見的人，於千萬年之中，時間的無涯的荒野裏…</td>
</tr>
</tbody>
</table>
基礎屬性
屬性名
屬性值
備註
lay-even
無
用於開啓 隔行 背景，可與其它屬性一塊兒使用
lay-skin=「屬性值」
line （行邊框風格）
row （列邊框風格）
nob （無邊框風格）
若使用默認風格不設置該屬性便可
lay-size=「屬性值」
sm （小尺寸）
lg （大尺寸）
若使用默認尺寸不設置該屬性便可
你所須要的基礎屬性寫在table標籤上，例如：
<!-- 一個帶有隔行背景，且行邊框風格的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>暱稱</th>
<th>加入時間</th>
<th>簽名</th>
</tr>
</thead>
<tbody>
<tr>
<td>賢心</td>
<td>2016-11-29</td>
<td>人生就像是一場修行</td>
</tr>
<tr>
<td>許閒心</td>
<td>2016-11-28</td>
<td>於千萬人之中碰見你所碰見的人，於千萬年之中，時間的無涯的荒野裏…</td>
</tr>
</tbody>
</table>
表單
依賴加載模塊：form
在一個容器中設定 class=「layui-form」 來標識一個表單元素塊
<form class="layui-form" action=""> </form>基本的行區塊結構，它提供了響應式的支持。能夠換成其餘結構，但必需要在外層容器中定義_class=「layui-form」_，form模塊才能正常工做。
<div class="layui-form-item"> <label class="layui-form-label">標籤區域</label> <div class="layui-input-block"> 原始表單元素區域 </div> </div>
輸入框
<input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input" />
- required：註冊瀏覽器所規定的必填字段
- lay-verify：註冊form模塊須要驗證的類型
- class=「layui-input」：layui.css提供的通用CSS類
下拉選擇框
<select name="city" lay-verify=""> <option value="">請選擇一個城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option> </select>
- 屬性_selected_可設定默認項
- 屬性_disabled_開啓禁用，select和option標籤都支持
<select name="city" lay-verify=""> <option value="010">北京</option> <option value="021" disabled>上海（禁用效果）</option> <option value="0571" selected>杭州</option> </select>
- 能夠經過 optgroup 標籤給select分組
<select name="quiz">
<option value="">請選擇</option>
<optgroup label="城市記憶">
<option value="你工做的第一個城市">你工做的第一個城市？</option>
</optgroup>
<optgroup label="學生時代">
<option value="你的工號">你的工號？</option>
<option value="你最喜歡的老師">你最喜歡的老師？</option>
</optgroup>
</select>
- 經過設定屬性 lay-search 來開啓搜索匹配功能
<select name="city" lay-verify="" lay-search> <option value="010">layer</option> <option value="021">form</option> <option value="0571" selected>layim</option> </select>
複選框
<h2>默認風格：</h2> <input type="checkbox" name="" title="寫做" checked> <input type="checkbox" name="" title="發呆"> <input type="checkbox" name="" title="禁用" disabled> <h2>原始風格：</h2> <input type="checkbox" name="" title="寫做" lay-skin="primary" checked> <input type="checkbox" name="" title="發呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
- 屬性_title_可自定義文本（舒適提示：若是隻想顯示覆選框，能夠不用設置title）
- 屬性_checked_可設定默認選中
- 屬性_lay-skin_可設置複選框的風格 （原始風格：lay-skin=「primary」）
- 設置value=「1」可自定義值，不然選中時返回的就是默認的on
開關
將複選框checkbox，經過設定 lay-skin=「switch」 造成了開關風格
<input type="checkbox" name="xxx" lay-skin="switch"> <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> <input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啓|關閉"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
- 屬性_checked_可設定默認開
- 屬性_disabled_開啓禁用
- 屬性_lay-text_可自定義開關兩種狀態的文本 （兩種文本用 「|」 隔開）
- 設置value=「1」可自定義值，不然選中時返回的就是默認的on
單選框
<input type="radio" name="sex" value="nan" title="男"> <input type="radio" name="sex" value="nv" title="女" checked> <input type="radio" name="sex" value="" title="中性" disabled>
- 屬性_title_可自定義文本
- 屬性_disabled_開啓禁用
- 設置value=「xxx」可自定義值，不然選中時返回的就是默認的on
文本域
<textarea name="remark" required lay-verify="required" placeholder="請輸入我的介紹" class="layui-textarea"></textarea>
- _class=「layui-textarea」_：layui.css提供的通用CSS類
組裝行內表單
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">範圍</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="￥"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="￥"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
- _class=「layui-inline」_：定義外層行內
- _class=「layui-input-inline」_：定義內層行內
忽略美化渲染
能夠對錶單元素增長屬性 lay-ignore 設置後，將不會對該標籤進行美化渲染，即保留系統風格。
<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表單方框風格
經過追加 layui-form-pane 的class，來設定表單的方框風格。
<form class="layui-form layui-form-pane" action="">
<!--
內部結構都同樣，值得注意的是 複選框/開關/單選框 這些組合在該風格下須要額外添加 pane屬性（不然 會看起來比較彆扭），如：
-->
<div class="layui-form-item" pane>
<label class="layui-form-label">單選框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
</form>
組件示例
彈出層
模塊加載名稱：_layer_，獨立版本：layer.layui.com
使用場景
因爲layer能夠獨立使用，也能夠經過Layui模塊化使用。因此請按照你的實際需求來選擇。
場景
用前準備
調用方式
- 做爲獨立組件使用
若是你只是單獨想使用 layer，你能夠去 layer 獨立版本官網下載組件包。你須要在你的頁面引入_jQuery_1.8以上的任意版本，並引入_layer.js_。
經過script標籤引入layer.js後，直接用便可。
- layui 模塊化使用
若是你使用的是 layui，那麼你直接在官網下載 layui 框架便可，無需引入 jQuery 和 layer.js，但須要引入_layui.css_和_layui.js_
經過layui.use(‘layer’, callback)加載模塊
做爲獨立組件使用 layer
<!-- 引入好layer.js後，直接用便可 --> <script src="layer.js"></script> <script> layer.msg('hello'); </script>在 layui 中使用 layer
layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello'); });
基礎參數
type - 基本層類型
類型：Number，默認：0 可傳入的值有： 0（信息框，默認） 1（頁面層） 2（iframe層） 3（加載層） 4（tips層）title - 標題
類型：String/Array/Boolean，默認：'信息' title支持三種類型的值： 若傳入的是普通的字符串，如 title :'我是標題'，那麼只會改變標題文本； 若須要自定義樣式，能夠title: ['文本', 'font-size:18px;']，數組第二項能夠寫任意css樣式； 若你不想顯示標題欄，能夠 title: false；content - 內容
類型：String/DOM/Array，默認：'' content可傳入的值是靈活多變的，不只能夠傳入普通的html內容，還能夠指定DOM。
/* 信息框 */ layer.open({ type:0, title:"系統消息", // content能夠傳入任意的文本或html content:"Hello" }); /* 頁面層 */ layer.open({ type:1, title:"系統消息", // content能夠傳入任意的文本或html content:"<div style='height:100px;width:200px'>Hello</div>" }); /* iframe */ layer.open({ type:2, title:"系統消息", // content是一個URL，若是你不想讓iframe出現滾動條，你還能夠content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no'] }); /* tips層 */ layer.open({ type: 4, content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM });area - 寬高
類型：String/Array，默認：'auto' 在默認狀態下，layer是寬高都自適應的。 當定義寬度時，你能夠area: '500px'，高度仍然是自適應的。 當寬高都要定義時，你能夠area: ['500px', '300px']。
icon - 圖標
注：信息框和加載層的私有參數。 類型：Number，默認：-1（信息框）/0（加載層） 信息框默認不顯示圖標。當你想顯示圖標時，默認層能夠傳入0-6。若是是加載層，能夠傳入0-2。
// eg1 layer.alert('酷斃了', {icon: 1}); // eg2 layer.msg('不開心。。', {icon: 5}); // eg3 layer.load(1); // 風格1的加載示例
// eg1 layer.alert('很高興見到你😊', {icon: 6}); // eg2 layer.msg('你願意和我作朋友麼？', { time: 0, //不自動關閉 btn: ['固然願意', '狠心拒絕'], // 按鈕 yes: function(index){ layer.close(index); // 關閉當前彈出框 layer.msg('新朋友，你好！', { icon: 6, // 圖標 btn: ['開心','快樂'] }); } }); // eg3 layer.msg('這是經常使用的彈出層'); // eg4 layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5}); // eg5 layer.msg('玩命加載中...=￣ω￣=', function(){ // 關閉後的操做 layer.msg('(⊙o⊙)？'); });
日期與時間選擇
模塊加載名稱：_laydate_，獨立版本：http://www.layui.com/laydate/
layDate 包含了大量的更新，其中主要以：_年選擇器_、_年月選擇器_、_日期選擇器_、_時間選擇器_、_日期時間選擇器_ 五種類型的選擇方式。
快速使用
和 layer 同樣，能夠在 layui 中使用 layDate，也可直接使用 layDate 獨立版，請按照實際需求來選擇。
場景
用前準備
調用方式
- layui 模塊化使用
下載 layui 後，引入_layui.css_和_layui.js_便可
經過layui.use(‘laydate’, callback)加載模塊後，再調用方法
- 做爲獨立組件使用
去 layDate 獨立版本官網下載組件包，引入 laydate.js 便可
直接調用方法使用
在layui模塊中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期與時間選擇</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="date1" />
</div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript"> layui.use('laydate', function(){
var laydate = layui.laydate;
//執行一個laydate實例
laydate.render({
elem: '#date1' //指定元素
});
}); </script>
</html>
基礎參數
elem - 綁定元素
類型：String/DOM，默認值：無 必填項，用於綁定執行日期渲染的元素，值通常爲選擇器，或DOM對象
laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 });type - 控件選擇類型
類型：String，默認值：date 用於單獨提供不一樣的選擇器類型，可選值以下表：
type可選值
名稱
用途
year
年選擇器
只提供年列表選擇
month
年月選擇器
只提供年、月選擇
date
日期選擇器
可選擇：年、月、日。type默認值，通常可不填
time
時間選擇器
只提供時、分、秒選擇
datetime
日期時間選擇器
可選擇：年、月、日、時、分、秒
//年選擇器 laydate.render({ elem: '#test' ,type: 'year' }); //年月選擇器 laydate.render({ elem: '#test' ,type: 'month' }); //日期選擇器 laydate.render({ elem: '#test' //,type: 'date' //默認，可不填 }); //時間選擇器 laydate.render({ elem: '#test' ,type: 'time' }); //日期時間選擇器 laydate.render({ elem: '#test' ,type: 'datetime' });format - 自定義格式
類型：String，默認值：yyyy-MM-dd 經過日期時間各自的格式符和長度，來設定一個你所須要的日期格式。layDate 支持的格式以下：
格式符
說明
yyyy
年份，至少四位數。若是不足四位，則前面補零
y
年份，不限制位數，即無論年份多少位，前面均不補零
MM
月份，至少兩位數。若是不足兩位，則前面補零。
M
月份，容許一位數。
dd
日期，至少兩位數。若是不足兩位，則前面補零。
d
日期，容許一位數。
HH
小時，至少兩位數。若是不足兩位，則前面補零。
H
小時，容許一位數。
mm
分鐘，至少兩位數。若是不足兩位，則前面補零。
m
分鐘，容許一位數。
ss
秒數，至少兩位數。若是不足兩位，則前面補零。
s
秒數，容許一位數。
經過上述不一樣的格式符組合成一段日期時間字符串，可任意排版。
//自定義日期格式 laydate.render({ elem: '#test' ,format: 'yyyy年MM月dd日' //可任意組合 });value - 初始值
類型：String，默認值：new Date() 支持傳入符合format參數設定的日期格式字符，或者 new Date()
// 傳入符合format格式的字符給初始值 laydate.render({ elem: '#test' ,value: '2018-08-18' //必須遵循format參數設定的格式 }); // 傳入Date對象給初始值 laydate.render({ elem: '#test' ,value: new Date(1534766888000) //參數即爲：2018-08-20 20:08:08 的時間戳 });
分頁
模塊加載名稱：_laypage_
快速使用
laypage 的使用很是簡單，指向一個用於存放分頁的容器，經過服務端獲得一些初始值，便可完成分頁渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分頁</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="test1"></div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript"> layui.use('laypage', function(){
var laypage = layui.laypage;
//執行一個laypage實例
laypage.render({
elem: 'test1' //注意，這裏的 test1 是 ID，不用加 # 號
,count: 50 //數據總數，從服務端獲得
});
}); </script>
</html>
基礎參數
經過核心方法：_laypage.render(options)_ 來設置基礎參數。
參數選項
說明
類型
默認值
elem
指向存放分頁的容器，值能夠是容器ID、DOM對象。如： 1. elem: ‘id’ 注意：這裏不能加 # 號 2. elem: document.getElementById(‘id’)
String/Object
-
count
數據總數。通常經過服務端獲得
Number
-
limit
每頁顯示的條數。laypage將會藉助 count 和 limit 計算出分頁數。
Number
10
limits
每頁條數的選擇項。若是 layout 參數開啓了 limit，則會出現每頁條數的select選擇框
Array
[10, 20, 30, 40, 50]
curr
起始頁。通常用於刷新類型的跳頁以及HASH跳頁。如：
// 開啓location.hash的記錄
laypage.render({
elem: ‘test1’ ,
count: 500 ,
// 獲取起始頁
curr: location.hash.replace(’#!fenye=’, ‘’)
// 自定義hash值
,hash: ‘fenye’
}); `
Number
1
groups
連續出現的頁碼個數
Number
5
prev
自定義「上一頁」的內容，支持傳入普通文本和HTML
String
上一頁
next
自定義「下一頁」的內容，同上
String
下一頁
first
自定義「首頁」的內容，同上
String
1
last
自定義「尾頁」的內容，同上
String
總頁數值
layout
自定義排版。可選值有：_count_（總條目輸區域）、_prev_（上一頁區域）、_page_（分頁區域）、_next_（下一頁區域）、_limit_（條目選項區域）、_refresh_（頁面刷新區域。注意：layui 2.3.0 新增） 、_skip_（快捷跳頁區域）
Array
[‘prev’, ‘page’, ‘next’]
theme
自定義主題。支持傳入：_顏色值_，或_任意普通字符_。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //將會生成 class=「layui-laypage-xxx」 的CSS類，以便自定義主題
String
-
hash
開啓location.hash，並自定義 hash 值。若是開啓，在觸發分頁時，會自動對url追加：_#!hash值={curr}_ 利用這個，能夠在頁面載入時就定位到指定頁
String/Boolean
false
jump - 切換分頁的回調
當分頁被切換時觸發，函數返回兩個參數：_obj_（當前分頁的全部選項值）、first（是否首次，通常用於初始加載的判斷）
laypage.render({
elem: 'page'
,count: 100 //數據總數，從服務端獲得
,groups:10 // 連續出現的頁碼個數
,layout:['prev', 'page', 'next','limit','count'] // 自定義排版
,limits:[5,10,20] // layout屬性設置了limit值，可會出現條數下拉選擇框
,jump: function(obj, first){
// obj包含了當前分頁的全部參數，好比：
console.log(obj.curr); //獲得當前頁，以便向服務端請求對應頁的數據。
console.log(obj.limit); //獲得每頁顯示的條數
//首次不執行
if(!first){
//do something
}
}
});
數據表格
模塊加載名稱：_table_
快速使用
建立一個table實例最簡單的方式是，在頁面放置一個元素
，而後經過 table.render() 方法指定該容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table數據表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table id="demo"></table>
</body>
<script src="layui/layui.js" type="text/javascript" ></script>
<script type="text/javascript"> layui.use('table', function(){
var table = layui.table;
// 第一個實例
table.render({
elem: '#demo'
,url: 'user.json' // 數據接口
,cols: [[ // 表頭
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用戶名', width:80}
,{field: 'sex', title: '性別', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '簽名', width: 177}
]]
});
}); </script>
</html>
數據接口 user.json
{
"code": 0,
"msg": "",
"count": 50,
"data": [{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "簽名-0"
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "簽名-1"
},
{
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "簽名-2"
},
{
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "簽名-3"
},
{
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "簽名-4"
}
]
}
三種初始化渲染方式
機制
適用場景
方法渲染
用JS方法的配置完成渲染
（推薦）無需寫過多的 HTML，在 JS 中指定原始元素，再設定各項參數便可。
自動渲染
HTML配置，自動渲染
無需寫過多 JS，可專一於 HTML 表頭部分
轉換靜態表格
轉化一段已有的表格元素
無需配置數據接口，在JS中指定表格元素，並簡單地給表頭加上自定義屬性便可
方法渲染
將基礎參數的設定放在了JS代碼中，且原始的 table 標籤只須要一個_選擇器_
<table id="demo"></table>
渲染表格
layui.use('table', function(){ var table = layui.table; // 執行渲染 table.render({ elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器） ,url: 'user.json' // 數據接口 ,height: 315 // 容器高度 ,page:true // 開啓分頁 ,cols: [[ // 設置表頭 {field: 'id', title: 'ID'} ,{field: 'username', title: '用戶名'} ,{field: 'sex', title: '性別'} ]] }); });注：table.render()方法返回一個對象：var tableIns = table.render(options)，可用於對當前表格進行「重載」等操做。
自動渲染
在一段 table 容器中配置好相應的參數，由 table 模塊內部自動對其完成渲染，而無需你寫初始的渲染方法。
1) 帶有 class=「layui-table」 的
標籤。
2) 對標籤設置屬性 lay-data="" 用於配置一些基礎參數
3) 在
標籤中設置屬性lay-data=""用於配置表頭信息
<table class="layui-table" lay-data="{url:'user.json'}">
<thead>
<tr>
<th lay-data="{field:'id'}">ID</th>
<th lay-data="{field:'username'}">用戶名</th>
<th lay-data="{field:'sex', sort: true}">性別</th>
</tr>
</thead>
</table>
轉換靜態表格
頁面已經存在了一段有內容的表格，由原始的table標籤組成，只須要賦予它一些動態元素。
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">暱稱</th>
<th lay-data="{field:'experience', width:80, sort:true}">積分</th>
<th lay-data="{field:'sign'}">簽名</th>
</tr>
</thead>
<tbody>
<tr>
<td>賢心1</td>
<td>66</td>
<td>人生就像是一場修行a</td>
</tr>
</tbody>
</table>
執行用於轉換表格的JS方法
layui.use('table', function(){
var table = layui.table;
// 轉換靜態表格
table.init('demo', {
height: 315 // 設置高度
// 支持全部基礎參數
});
});
基礎參數使用的場景
// 場景一：下述方法中的鍵值即爲基礎參數項
table.render({
height: 300
,url: 'user.json'
});
// 場景二：下述 lay-data 裏面的內容即爲基礎參數項，切記：值要用單引號
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table>
// 更多場景：下述 options 即爲含有基礎參數項的對象
> table.init('filter', options); // 轉化靜態表格
> var tableObj = table.render({});
tableObj.reload(options); // 重載表格
開啓分頁
<!-- HTML代碼 --> <table id="demo"></table>
// JS實現代碼
layui.use('table', function(){
var table = layui.table;
// 執行渲染
table.render({
elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
,url: 'user.json' // 數據接口
,height: 315 // 容器高度
,page:true // 開啓分頁
,cols: [[ // 設置表頭
{field: 'id', title: 'ID'}
,{field: 'username', title: '用戶名'}
,{field: 'sex', title: '性別'}
]]
});
});
開啓頭部工具欄
<table id="demo" lay-filter="demo"></table>
<!-- 表格工具欄 -->
<script type="text/html" id="toolbarDemo"> <div class="layui-btn-container">
<!-- lay-event 給元素綁定事件名 -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
獲取選中行數據
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
獲取選中數目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
驗證是否全選
</button>
</div> </script>
<!-- 表頭工具欄 -->
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script>
layui.use('table', function(){
var table = layui.table;
// 執行渲染
table.render({
elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
,url: 'user.json' // 數據接口
,height: 315 // 容器高度
,page:true // 開啓分頁
,cols: [[ // 設置表頭
{field: 'id', title: 'ID'}
,{field: 'username', title: '用戶名'}
,{field: 'sex', title: '性別'}
,{title:'操做', toolbar: '#barDemo'} // 綁定表頭工具欄
]]
,toolbar: '#toolbarDemo' // 開啓頭部工具欄，併爲其綁定左側模板
});
/**
* 頭工具欄事件
* 語法：
table.on('toolbar(demo)', function(obj){
});
注：demo表示選擇器元素上設置的lay-filter屬性值
*/
table.on('toolbar(demo)', function(obj){
// obj.config.id 當前選擇器的id屬性值，即demo
// 獲取當前表格被選中的記錄對象，返回數組
var checkStatus = table.checkStatus(obj.config.id);
// obj.event 獲得當前點擊元素的事件名
switch(obj.event){
case 'getCheckData':
// 獲取被選中的記錄的數組
var data = checkStatus.data;
// 將數組數據解析成字符串
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('選中了：'+ data.length + ' 個');
break;
case 'isAll':
// checkStatus.isAll 判斷記錄是否被全選
layer.msg(checkStatus.isAll ? '全選': '未全選');
break;
// 自定義頭工具欄右側圖標 - 提示
case 'LAYTABLE_TIPS':
layer.alert('這是工具欄右側自定義的一個圖標按鈕');
break;
};
});
/**
* 監聽行工具事件
*/
table.on('tool(demo)', function(obj){
// 獲得當前操做的tr的相關信息
var data = obj.data;
if(obj.event === 'del'){
// 確認框
layer.confirm('真的刪除行麼', function(index){
// 刪除指定tr
obj.del();
// index 當前彈出層的下標，經過下標關閉彈出層
layer.close(index);
});
} else if(obj.event === 'edit'){
// 輸入框
layer.prompt({
// 表單元素的類型 0=文本框 1=密碼框 2=文本域
formType: 0
,value: data.username
}, function(value, index){
// 修改指定單元格的值
// value表示輸入的值
obj.update({
username: value
});
// 關閉彈出層
layer.close(index);
});
}
});
});
開啓單元格編輯
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox'}">ID</th>
<th lay-data="{field:'id', sort: true}">ID</th>
<th lay-data="{field:'username', sort: true, edit: 'text'}">用戶名</th>
<th lay-data="{field:'sex', edit: 'text'}">性別</th>
<th lay-data="{field:'city', edit: 'text'}">城市</th>
<th lay-data="{field:'experience', sort: true, edit: 'text'}">積分</th>
</tr>
</thead>
</table>
layui.use('table', function(){
var table = layui.table;
// 監聽單元格編輯
table.on('edit(demo)', function(obj){
var value = obj.value // 獲得修改後的值
,data = obj.data // 獲得所在行全部鍵值
,field = obj.field; // 獲得字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改成：'+ value);
});
});
數據表格的重載
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
layui.use('table', function(){
var table = layui.table;
var $ = layui.jquery; // 獲取jquery對象
// 執行渲染
table.render({
elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器）
,url: 'user.json' // 數據接口
,page:true // 開啓分頁
,cols: [[ // 設置表頭
{type: 'checkbox', fixed: 'left'} // 設置複選框
,{field: 'id', title: 'ID'}
,{field: 'username', title: '用戶名'}
,{field: 'sex', title: '性別'}
]]
});
// 給指定元素綁定事件
$(document).on('click', '#searchBtn', function(data) {
// 獲取搜索框對象
var demoReload = $('#demoReload');
table.reload('demo', {
where: { // 設定異步數據接口的額外參數，任意設
id: demoReload.val()
}
,page: {
// 讓條件查詢從第一頁開始查詢，不寫則從當前頁開始查詢，此頁以前的數據將不歸入條件篩選
curr: 1 // 從新從第 1 頁開始
}
}); // 只重載數據
});
});
sort: true, edit: ‘text’}">積分
layui.use('table', function(){
var table = layui.table;
// 監聽單元格編輯
table.on('edit(demo)', function(obj){
var value = obj.value // 獲得修改後的值
,data = obj.data // 獲得所在行全部鍵值
,field = obj.field; // 獲得字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改成：'+ value);
});
});
##### 數據表格的重載
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
`
`js layui.use('table', function(){ var table = layui.table; var $ = layui.jquery; // 獲取jquery對象 // 執行渲染 table.render({ elem: '#demo' // 指定原始表格元素選擇器（推薦id選擇器） ,url: 'user.json' // 數據接口 ,page:true // 開啓分頁 ,cols: [[ // 設置表頭 {type: 'checkbox', fixed: 'left'} // 設置複選框 ,{field: 'id', title: 'ID'} ,{field: 'username', title: '用戶名'} ,{field: 'sex', title: '性別'} ]] }); // 給指定元素綁定事件 $(document).on('click', '#searchBtn', function(data) { // 獲取搜索框對象 var demoReload = $('#demoReload'); table.reload('demo', { where: { // 設定異步數據接口的額外參數，任意設 id: demoReload.val() } ,page: { // 讓條件查詢從第一頁開始查詢，不寫則從當前頁開始查詢，此頁以前的數據將不歸入條件篩選 curr: 1 // 從新從第 1 頁開始 } }); // 只重載數據 }); });
`
相關文章
- 1. LayUI 的安裝及使用
- 2. layui的使用
- 3. pymysql的安裝及使用
- 4. GitLab的安裝及使用
- 5. Maven的安裝及使用
- 6. docker 的安裝及使用
- 7. JavaWeb_redis的安裝及使用
- 8. docker的安裝及使用
- 9. Mongodb的安裝及使用
- 10. Jmter的安裝及使用
- 更多相關文章...
- • Redis基本安裝和使用 - Redis教程
- • Wireshark下載安裝和使用教程 - TCP/IP教程
- • Composer 安裝與使用
- • IntelliJ IDEA安裝代碼格式化插件
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. LayUI 的安裝及使用
- 2. layui的使用
- 3. pymysql的安裝及使用
- 4. GitLab的安裝及使用
- 5. Maven的安裝及使用
- 6. docker 的安裝及使用
- 7. JavaWeb_redis的安裝及使用
- 8. docker的安裝及使用
- 9. Mongodb的安裝及使用
- 10. Jmter的安裝及使用