Layui
使用
引入方式
-
模塊化
- 引入layui.js文件和layui.css文件
- layui.use([模塊數組],function(){JS代碼});
-
非模塊化
-
直接引入layui.all.js文件(相當於引入所有模塊)和layui.css文件
- 這樣就不需要use代碼
-
使用方法
-
一般新建一變量
-
var layer= layui.layer; 使用layer模塊就不用加layui前綴
- 這樣比較簡單,方便
元素
圖標
-
需要一個容器標簽才可以顯示
-
相關樣式
- layui-icon
-
使用實體字符或者使用類名
按鈕
-
相關樣式
-
必要樣式
- layui-btn
-
主題樣式
- layui-btn-primary(原始按鈕)
- layui-btn-normal(百搭按鈕)
- layui-btn-warm(暖色按鈕)
- layui-btn-danger(警告按鈕)
- layui-btn-disabled(禁用按鈕)
-
尺寸
- layui-btn-lg(最大按鈕)
- 默認按鈕不加
- layui-btn-sm(小型按鈕)
- layui-btn-xs(微型按鈕)
-
其它樣式
- layui-btn-radius(圓角按鈕)
- 外層div添加樣式:layui-btn-group(按鈕組)
-
導航菜單
-
相關樣式
-
方向
- layui-nav(水平)
- layui-nav-tree(垂直)
-
其它樣式
- layui-nav(導航菜單)
- layui-nav-item(導航菜單的子項目列表)
- layui-nav-child(指向的子項)
- layui-this(通用,默認選擇)
-
選項卡
-
相關樣式
-
風格
- layui-tab(默認風格_
- layui-tab-brief(簡潔風格)
- layui-tab-card(卡片風格)
-
其它樣式
- layui-tab-title(卡片頭)
- layui-this(默認選中)
- layui-tab-content(卡片內容外層)
- layui-tab-item(卡片內容)
- layui-show(顯示卡片)
-
-
相關屬性
- lay-allowclose="true"(使卡片可以關閉)
- lay-filter="demo"(layui可以找到元素)
-
相關方法
進度條
-
相關樣式
- layui-progress(外層div)
- layui-progress-bar(內層div)
- layui-progress-big(大號進度條,文本顯示在里面)
-
相關屬性
- lay-percent="10%"(設置進度,內層)
- lay-showPercent="yes"(外層div,用於顯示文本)
面板
-
相關樣式
-
layui-card-header(面板標題)
-
layui-card-body(面板內容)
-
折疊面板
- layui-collapse(整個面板容器)
- layui-colla-item(面板塊)
- layui-colla-title(面板標題)
- layui-colla-content(面板內容)
- layui-show(初始展開)
-
手風琴面板
- 在折疊面板容器中設置屬性lay-accordion即可
- 面板只能存在一個打開狀態,不可以多個同時打開
-
徽章
-
相關樣式
- layui-badge-dot(不可以加文字,小圓點,改變背景改變顏色)
- layui-badge(橢圓體)
- layui-badge-rim(邊框體)
-
一般用於插入其他元素中間修飾作用,類似於郵件有多少封未讀
時間線
-
相關樣式
-
layui-timeline(時間線外層)
-
layui-timeline-item(單個時間線的內容)
-
插入圖標用一個容器
-
-
layui-timeline-content(具體內容層)
-
layui-timeline-title(具體內容標題)
-
下面接一個層用於設置內容
-
表格
-
相關樣式
- layui-table(普通表格)
-
相關屬性
-
lay-even
- 使用隔行背景
-
lay-skin="屬性值"
- line(行邊框風格)
- row(列邊框風格)
- nob(無邊框風格)
-
lay-size="屬性值"
- sm(小尺寸)
- lg(大尺寸)
-
動畫
-
相關樣式
-
layui-anim(必要樣式)
-
layui-anim-loop(循環動畫)
-
動畫樣式
- layui-anim-up(底部向上滑動)
- layui-anim-upbit(微微向上滑動)
- layui-anim-scale(平滑放大)
- layui-anim-scaleSpring(彈簧式放大)
- layui-anim-fadein(逐漸顯示)
- layui-anim-fadeout(逐漸消失)
- layui-anim-rotate(360度旋轉)
-
輔助元素
-
引用
- layui-elem-quote(引用區域的文字)
-
字段集區塊
- layui-elem-field(設置區塊div)
- layui-field-box(設置區塊內容)
模塊
layer:彈出層
-
屬性
-
type
- 0(默認信息框)
- 1(頁面層)
- 2(iframe層)
- 3(加載層)
- 4(tips層)
-
title
- 設置標題文本
- 可以以數組形式填寫標題內容和樣式
-
content
- 可以寫很多東西
- HTML內容
- 超鏈接等
-
skin
- 使用某個css類
-
area
- 設置寬和高,以數組形式
- area:['200px','200px']
-
offset
- 用於設置彈出層的位置坐標
- auto(默認,中間)
- 定義一個值默認是top
- 定義兩個是絕對位置
- 使用首字母,例如:offset:'lt'左上角
-
icon
- 內部有7個icon
- 所以參數是數字
- 默認沒有,一共有0-6個編號
- 加載層有0-2個
-
btn
-
按鈕,btn:['btn1','btn2']
-
可以有無限個按鈕
-
按鈕回調,,btn2:function(index,layero){}
-
btnAlign
- 按鈕對齊
- l:左對齊
- r:右對齊
- c:居中對齊
-
closeBtn
- 關閉按鈕的風格
- 默認為1,第二種比較丑
-
-
shade
-
設置毛玻璃背景
-
除了彈出層意外的窗口內部用一個背景色遮住可以設置透明度
-
shade:[0.4,'#fff']
- 默認0.3
-
ShadeClose
- 默認關閉
- 設置true打開
- 點擊彈出層以外部分可以關閉彈出層
-
-
time
- 自動關閉(毫秒)
- 默認不會自動關閉
-
id
- 彈出層唯一表示,一般用於頁面層或者iframe
-
anim
-
彈出動畫
-
默認0:平滑放大
-
1:從上掉落
-
2:底部向上滑入
-
3:左滑入
-
4:左翻滾
-
5:逐漸顯示
-
6:抖動
-
isOutAnim
- 默認關閉彈出有個動畫(默認開啟),設置false可以關閉
-
-
頁面尺寸以及定位
-
fixed
- 默認固定(true)
- 如果不固定會跟隨頁面滾動
-
resize
-
是否允許拉伸
-
默認true
-
resizing:function()
- 監聽窗口拉伸動作
-
-
maxWidth&maxHeight
- 最大寬度,area:'auto'有效
- 高度自適應有效
-
scrollbar
- 是否允許瀏覽器出現滾動條
- 默認true
-
zIndex
- 層疊順序,用於解決其他組件層疊沖突
-
maxmin
- 最大最小化默認false
-
-
move
-
是否允許拖動
-
默認true
-
moveOut
- 是否可以拖動到窗口外面
- 默認false
-
moveEnd:function()
- 拖動完以后的回調函數(默認沒有)
-
-
tips
-
四個方向彈出
- 1-4(順時針)
- 以數組方式設置顏色
- tips:[1,'#fff']
-
tipMore
- 是否允許多個共存
- 默認false
-
-
-
方法
-
語法
- success:function()
-
success
- 成功后的回調方法
- 參數是DOM和索引
-
yes
- 確認按鈕回調方法
- 參數是DOM和索引
-
cancel
- 關閉按鈕回調方法
- 參數是DOM和索引
-
end
- 層銷毀觸發回調函數
- 無參數
-
full/min/restore
- 放大縮小還原觸發回調
- DOM
-
layer.config()
- 初始化全局配置
-
layer.ready()
- 初始化就緒
-
layer.open()
- 核心方法,用於創建層
-
layer.alert()
- 可以添加圖標,以及回調函數
-
layer.confirm()
- 可以添加圖標和回調
-
layer.msg
- 圖標回調
- 設置關閉時間
-
layer.load
-
加載層
-
設置等待時間以及風格
- 風格0-2
-
var x = layer.load(2,{time:2000});
-
layer.close(x);
-
-
layer.tips
- 類似msg
-
layer.close()
- 關閉特定層
- 創建層的時候賦值給一個變量即可
-
layer.coseAll()
- 關閉所以層,在不指定類型的情況下
- 例如指定:layer.closeAll(page);
-
layer.style(index,cssstyle)
- 給指定層設置css樣式
-
layer.title("標題內容",index)
- 給指定層改變標題
-
layer.getChildFrame(selector, index)
- 獲取iframe頁面DOM
-
layer.getFrameIndex(windowName)
- 獲取iframe指定層的索引
-
layer.iframeAuto(index)
- 指定iframe層自適應
-
layer.iframeSrc(idnex,url)
- 重新設定iframe的url
-
layer.setTop(layero)
- 置頂當前窗口
-
layer.full()、layer.min()、layer.restore()
- 最大最小化和還原
-
layer.prompt(options, yes)
- 輸入層
-
layer.tab({})
- tab層,彈出一組tab
-
layer.photos(options)
- 相冊層
-
date:日期選擇
-
elem(綁定元素)
-
type(控件類型選擇)
- year(年)
- month(年月)
- date(年月日)
- time(時間)
- datetime(時間日期)
-
range(范圍選擇)
-
默認false
-
range:true
- 或者range:'~'(定義分隔字符)
-
-
format(自定義格式)
- 例如:yyyy-MM-dd HH:mm:ss
- 2017-08-18 20:08:08
-
value(設置初始值)
-
默認為:new Date()
-
value:'2018-08-18'(必須遵循format設定格式)
-
例如:value:new Date(153476888000)
-
isInitValue(是否向元素填充初始值)
- 默認true
-
-
min/max
- 和value格式一樣,遵循format
- 或者:min:-7,代表七天內,類似格式
-
trigger(自定義彈出控件事件)
- 默認為focus
- 如果綁定元素為非輸入框默認事件為click
-
position(控件定位)
-
abolute(絕對定位,始終吸附綁定元素,默認)
-
fixed(固定定位,吸附綁定元素不跟隨瀏覽器滾動)
-
static(靜態定位,嵌入指定容器)
-
show(控件默認顯示是否在綁定元素區域)
- 默認false
-
-
ZIndex(層疊順序)
-
showBottom(是否顯示底部)
-
默認true
-
btns(工具按鈕)
- 目前內置可識別
- btns:['clear','now','confirm']
- 清除,當前時間,確認
-
-
lang(兩種語言版本)
- 默認:lang:'cn'
-
theme(主題)
- default(默認簡約)
- molv(墨綠)
-
顏色值自定義
- grid(格子主題)
-
calendar(是否顯示公歷節日)
- 默認false
- 國際版true也不會顯示
-
mark(標注重要日子)
- mark:{'0-9-18':'國恥'}
- 固定格式
- 如果年份為0默認每年月份為0默認每月
-
函數
-
ready(空間打開觸發回調)
- 初始時間為參數
-
change(日期切換發生回調)
- 生成的值
- 日期時間對象
- 結束日期時間對象
-
done(點擊日期,清空,現在,確定都會觸發)
- 生成的值,日期時間對象,結束的日期時間對象
-
render
- var insl = laydate.render({elem:'#test'})
-
laydate.getEndDate(mounth,year)
- 獲取指定年月最后一天,沒有年默認當前
-
slider:滑塊
-
elem(綁定屬性)
-
type(滑塊類型)
- 默認default(水平)
- vertical(垂直)
-
min/max(滑塊最小值最大值)
-
range(是否開啟滑塊范圍拖拽)
- 默認false
-
value(滑塊初始值)
- 如果開啟range需要傳入,value:[20,30]
-
step(拖動步長)
-
showstep(是否顯示間斷點)
-
tips(是否顯示文本提示)
-
input(是否顯示輸入框,如果開啟range此選項無效)
-
height(針對垂直滑塊的高度)
-
disabled(是否將滑塊禁用拖拽)
-
theme(主題顏色#自定義)
rate:評分
- elem(綁定元素)
- length(星星的個數,如果是小數向下取整)
- value(初始值)
- theme(主題默認#ffb800可以自定義)
- half(是否可以選擇半星)
- text(是否顯示對應內容)
- readonly(是否只讀)
- choose:function(value){選擇星星后觸發}
carousel:輪播圖
-
相關類
- layui-carousel(標識一個輪播圖容器)
- carousel-item(這是一個屬性,放置輪播內容外面)
-
carousel.render
-
elem(綁定元素)
-
width/height(設定輪播器高度寬度像素可以百分比)
-
full(是否全屏輪播,默認否)
-
anim(切換動畫方式)
- default(左右,默認)
- updown(上下)
- fade(漸隱漸現)
-
autoplay(是否支持自動切換,默認true)
-
interval(自動切換時間間隔,單位毫秒,不小於800)
-
index:初始條目[0]
-
arrow:切換箭頭顯示狀態
- hover:懸停顯示,默認
- always:始終顯示
- none:始終不顯示
-
indicator:指示器位置
- inside:容器內部,默認
- outside:容器外部
- none:不顯示
- 如果設置了updown此參數無效
-
trigger:指示器的觸發事件
-
laytpl:模板引擎
-
{{d.field}}
-
輸出一個普通字符串,不轉譯html
-
{{d.field}}
-
-
-
{{=d.field}}
- 輸出普通字段,並且轉義HTML
-
{{#JavaScript表達式}}
- 如果想輸出一個函數應該{{fun}}
-
{{!template!}}
- 不解析該模板
flow:流加載
- elem:綁定元素
- scrollElem:滾動條所在元素選擇
- isAuto:是否自動加載
- end:用於頁末顯示內容(默認:沒有更多了)
- isLazyimg:是否開啟圖片懶加載,默認false(如果設置,img中的src需要改成lay-src)
- mb:與底部臨界距離,默認50,當滾動條產生這個距離觸發加載,(只有isAuto:true有效)
- done:function:到達臨界點觸發回調,兩個參數,一個是當前頁page,一個是下一頁next
util:工具集
-
固定塊
-
語法:util.fixbar(options)
-
bar1:默認false,如果為true則顯示第一個(默認圖標),如果參數為圖標字符,則覆蓋默認圖標
-
bar2:同上
-
bgcolor:定義區塊背景色
-
showHeight:用於控制top按鈕滾動高度臨界值,默認200
-
css:可以通過重置bar的位置,css:{right:200,bottom:299}
-
click:function()
- 點擊bar的回調,帶有一個參數用於區分var
- 支持類型有:bar1,bar2,top
-
-
倒計時
-
語法:util.countdown(endTime,serverTime,calback)
-
endTime:結束時間戳或Date對象
-
serverTime:當前服務器時間戳或者date對象
-
callback:回調函數如果正在倒計時每秒執行一次返回三個參數
-
date
-
serverTime
-
timer
- 計時器返回的id值,用於clearTimeout
-
-
-
-
其它相關方法
-
util.timeAge(time,onlyDate)
- 某個時間在當前時間多久前
- time:時間戳或者日期對象
- onlyDate:是否在超過30天后,只返回日期
- 3分鍾內:剛剛
- 30天內:若干分鍾小時或者天前
- 30天以上,返回日期字符
-
util.toDateString(time,format)
- 轉化時間戳或者日期對象為日期格式
- time:日期對象或者時間戳
- format:日期格式字符
-
util.digit(num,length)
- 如果num長度小於length在num前面補0
-
util.escape(str)
-
轉義xss字符
- str為任意字符
-
-
util.event(attr,obj,eventType)
-
layactive='1'
- 元素的屬性
-
attr:監聽事件元素的屬性
-
obj:事件回調,一堆觸發函數
-
eventType:事件類型,默認click
-
-
code:代碼修飾器
-
在pre標簽中添加class="layui-code"
-
然后導入模塊layui.code()
-
elem:綁定元素
-
title:設定標題
-
height:設置最大高度
-
encode:是否轉義HTML標簽默認false
-
skin
-
默認風格
-
skin: 'notepad'
- notepad++
-
-
about:是否剔除右上角關於
-
colorpicker:顏色選擇器
-
顏色選擇器
-
elem:綁定元素
-
color:默認顏色(支持各種格式)
-
format:顏色顯示/輸入格式,可選,(hex,rgb)
- 如果rgb開啟透明度自動變成rgba,默認顏色黑色
-
alpha:是否開啟透明度
-
predefine:預定義顏色是否開啟
-
color:預定義顏色,需要predefine配合
-
size:下拉框大小
- lg
- sm
- xs
-
chang:function:顏色改變回調,參數是顏色
-
done:function:點擊確認或者清除觸發回調,返回當前顏色值
tree:樹
-
語法:tree.render()
-
elem:綁定元素
-
data:數據源
- title:節點標題
- id:節點唯一索引
- field:節點字段名
- children:子節點,設定選項和父節點一樣
- href:點擊節點彈出新窗口對應url,需要開啟isJump參數
- spread:節點是否初始展開,默認false
- checked:節點是否初始為選中狀態,如果開啟復選框默認false
- disabled:節點是否為禁用狀態,默認false
-
id:設定實例唯一索引,用於基礎方法傳參使用
-
showCheckbox:是否顯示復選框
-
edit:是否開啟節點操作圖標,默認false
- 如果為true按照數組順序
- 目前支持edit:['add','update','del']
-
accordion:是否啟用手風琴模式,默認false
-
onlylconControl:如果為true只能點擊左側圖標收縮,默認false可以點擊節點文本
-
isJump:是否允許點擊節點彈出新窗口,默認false
-
showLine:是否開啟連接線,默認true如果不開啟左側會出現三角圖標
-
text:自定義各類默認文本
-
回調函數
-
click(obj)
-
obj.data:當前節點數據
-
obj.state:當前節點展開狀態
- open
- close
- normal
-
obj.elem:當前節點元素
-
obj.data.children:當前節點下是否有子節點
-
-
oncheck
- obj.data:節點數據
- obj.checked:展開狀態
- obj.elem:節點元素
-
operate操作節點回調
-
obj.type:操作類型
- add
- edit
- del
-
obj.data:當前節點數據
-
obj.elem:當前節點元素
-
-
tree.getChecked(id):獲取選中的節點
-
tree.setChecked("id",[2,3,5]):批量勾選節點
-
transfer:穿梭框
-
elem:綁定元素
-
title:穿梭框上方標題
-
data:數據源
-
parseData:用於對數據源進行格式解析
-
合法格式
- [{"value":"1","title":"禮拜","disabled":"","checked":""}]
-
不合法
- [{"id":"1","name":"李白"}]
-
解析
- parseData:function(res){return{"value":res.id}}
-
-
value:初始選中的數據(右側)
-
id:唯一實例索引
-
showSearch:是否開啟搜索,默認false
-
width/height:定義左右穿梭框的寬度/高度
-
text:自定義文本
- 例如:none:'無數據'
- searchNone:'無匹配數據'
-
onchange:左右數據穿梭時的回調
-
基礎方法
-
transfer.set(options);
- 設定全局默認參數
-
transfer.getData(id);
- 獲取右側數據
-
transfer.reload(id,options);
- 重載實例
-
upload:文件上傳
-
文件上傳本來只是一個button,upload給它特殊技能
-
upload.render()
-
elem:綁定元素
-
url:服務器上傳接口
-
data:請求上傳接口的額外參數
-
headers:接口請求的頭
-
accept:上傳校驗文件類型
-
file
- 文件
-
images
- 圖片
-
video
- 視頻
-
audio
- 音頻
-
-
acceptMinme:規定打開文件選擇框時篩選文件類型
-
exts:允許上傳文件后綴
- 例如:exts:'zip\rar\7z';
-
auto:是否選擇完成自動上傳,默認true
-
bintAction:如果自動上傳為false這個用來綁定手動上傳按鈕
-
field:設定文件域或字段名
-
size:設置最大上傳文件大小,KB
-
multiple:是否允許多文件上傳,默認false
-
number:同上傳文件數量
-
drag:是否接受拖拽上傳文件
-
函數
-
choose():選擇文件后的回調函數
-
before():文件提交上傳前的回調
-
done():執行上傳請求后的回調,三個參數
- res:服務端響應信息
- index:當前文件的索引
- upload:重新上傳的方法,一般在上傳失敗的時候用
-
error():執行上傳請求異常回調
-
laypage:分頁
- laypage.render()
- elem:綁定元素
- count:數據總和,一般通過服務端得到
- limit:每頁顯示條數,默認10
- limits:每頁條數選擇項,默認array[10,20,30,40,50]
- curr:起始頁
- groups:連續出現頁碼個數,默認5
- prev:自定義上一頁內容,支持傳入文本或者HTML
- next:自定義下一頁
- first:自定義首頁
- last:自定義尾頁
- layout:自定義排版,默認array['prev','page','next']
- theme:自定義主題可以傳入顏色值
- hash:開啟location.hash,並自定義hash值
- jump:function:切換分頁回調函數
table:表格
-
頁面放置一個元素
-
elem:綁定元素
-
cols:設置表頭
-
值是一個二維數組
-
field:字段名,唯一表示
-
title:設定標題,可以看到的
-
width:設定列寬,不寫就自動分配,數字或者百分比
-
minWidth:局部定義當前常規單元格最小寬度,默認60,優先級高於cellMinWidth
-
type:設定列類型
- normal:常規無需設定
- checkbox:復選框列
- radio:單選框列
- numbers:序號列
- space:空列
-
LAY_CHECKED:是否全選狀態,默認false,開啟復選框列有效
-
fixed:固定列凍結
- left:固定在左
- right:固定在右
- 必須放在表頭的最前或者最后
-
hide:是否隱藏列,默認false
-
totalRow:是否開啟該列的自動合計功能,默認false
-
totalRowText:顯示自定義合計文本
-
sort:是否允許排序,默認false,ASCII對比
-
unresize:是否禁止拖拽列寬,默認false
-
edit:單元格編輯類型,默認不開啟,目前只支持text(輸入框)
-
event:自定義單元格點擊事件,可以在tool中完成對單元格的業務處理
-
style:自定義單元格樣式,傳入css樣式
-
align:單元格排列方式
- left
- center
- right
-
colspan:單元格所占列數,默認1,用於多級表頭
-
templet:自定義列模板
-
toolbar:綁定工具條模板
-
-
url:異步數據接口
-
url:接口地址默認傳遞兩個參數
- ?page=1&limi=30
- page當前頁碼
- limit每頁數據量
-
method:接口http請求類型,默認get
-
where:接口的其它參數
-
contentType:發送到服務端的內容編碼類型
- 如果你要發送 json 內容，可以設置：contentType: 'application/json'
-
header:接口的請求頭
-
parseData:數據格式解析回調函數
- parseData: function(res){ //res 即為原始返回的數據
return {
"code": res.status, //解析接口狀態
"msg": res.message, //解析提示文本
"count": res.total, //解析數據長度
"data": res.data.item //解析數據列表
};
}
- parseData: function(res){ //res 即為原始返回的數據
-
request:用於對分頁請求的參數,pag/limit從新設定名稱
-
response:重新設定返回數據格式
-
-
toolbar:開啟表格頭部工具欄,默認false
- toolbar:'#toolbarDemo' 指向自定義工具欄模板選擇器
- toolbar:'
xxx' 直接傳入工具欄模板字符
- toolbar:true 只開啟工具欄不顯示左側模板
- toolbar:'default' 讓工具欄左側顯示默認的內置模板
-
defaultToolbar:可以自由配置表頭工具欄右側的圖標按鈕
- filter:顯示篩選圖標
- exports:顯示導出圖標
- print:顯示打印圖標
-
width:設定table容器寬度,如果內容超出會出現滾動條
-
height:容器高度
- 默認高度隨數據適應
- 固定值:設定是一個數字,超高出現滾動條
- full-差值:高度始終鋪滿,無論瀏覽器尺寸
-
cellMinWidth:全局定義所有常規單元格的最小寬度,默認60
-
done:數據渲染完的回調,可以做一些其它操作
-
data:直接復制數據,array
-
totalRow:是否開啟合計行區域
-
page:分頁默認false
-
limit:每頁顯示的條數
-
limits:每頁顯示條數選擇
- 默認:[10,20,30,....,90]
-
loading:是否顯示加載條,默認true
-
title:定義table的大標題,文件導出用到
-
text:自定義文本,如空數據時的異常提示
-
autoSort:默認true,直接由table組件在前端自動處理排序
-
initSort:初始排序狀態,默認按某個字段排序
-
id:設定容器唯一id
-
skin:設定表格外觀尺寸
-
skin
- line:行邊框
- row:列邊框
- nob:無邊框
-
even:是否開啟隔行背景,默認false
-
size
- sm小尺寸
- lg大尺寸
-