Layui是一款功能強(qiáng)大的模塊化前端UI框架工具軟件，用戶使用這款軟件可以讓你在做軟件開(kāi)發(fā)的時(shí)候，遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式，并且擁有更加方便的框架得以套用，該軟件使用非常的便捷。
身處在前端社區(qū)的繁榮之下，我們都在有意或無(wú)意地追逐。而Layui偏偏回望當(dāng)初，奔赴在返璞歸真的漫漫征途，自信并勇敢著，追尋于原生態(tài)的書(shū)寫(xiě)指令，試圖以最簡(jiǎn)單的方式詮釋高效。
- 雙面體驗(yàn)
擁有雙面的不僅是人生，還有Layui。一面極簡(jiǎn)，一面豐盈。極簡(jiǎn)是視覺(jué)所見(jiàn)的外在，是開(kāi)發(fā)所念的簡(jiǎn)易。豐盈是傾情雕琢的內(nèi)在，是信手拈來(lái)的承諾。一切本應(yīng)如此，簡(jiǎn)而全，雙重體驗(yàn)。
- 星辰大海
如果眼下還是一團(tuán)零星之火，那運(yùn)籌帷幄之后，迎面東風(fēng)，就是一場(chǎng)烈焰燎原吧，那必定會(huì)是一番盡情的燃燒。待，秋風(fēng)蕭瑟時(shí)，散作滿天星辰，你看那四季輪回，正是Layui不滅的執(zhí)念。
2、使用簡(jiǎn)單，門(mén)檻極低，拿來(lái)即用；
3、外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈；
4、從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)；
5、更多是為服務(wù)端程序員量身定做，你無(wú)需涉足各種前端工具的復(fù)雜配置，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來(lái)；
6、兼容人類(lèi)正在使用的全部瀏覽器（IE6/7除外），可作為PC端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開(kāi)發(fā)方案。
2.實(shí)例：引入layui的核心文件，
<script src=layui/layui/layui.js></script>
<link href=layui/layui/css/layui.css>
如何在hbuilder中引入layui的核心文件，zhi'xu只需要引入核心文件即可，其他的在使用過(guò)程中會(huì)自動(dòng)引入，
3.頁(yè)面加載完成直接運(yùn)行彈出hello world。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>
<title></title>
<script src=layui/layui/layui.js></script>
<link href=layui/layui/css/layui.css>
</head>
<body>
<body>
<script>
//一般直接寫(xiě)在一個(gè)js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
layer.msg('Hello World');
});
</script>
</body>
</html>
4.layui.use(['layer', 'form'], function(){
var layer = layui.layer;
layer.msg('Hello World');
});
官網(wǎng)首頁(yè)的實(shí)例：layui.use為固定格式，[layer，form]分別為自動(dòng)引入的layer.js和form.js文件，為框架自動(dòng)引入
5.如果你想采用非模塊化方式（即所有模塊一次性加載，盡管我們并不推薦你這么做），你也可以按照下面的方式使用：
<script>
;!function(){
var layer = layui.layer
layer.msg('Hello World');
}();
</script>
6.注意<script></script>中的格式；！是不能夠丟的，在最后還有（）這是layui的固定格式，也是必須有的
7.Layui在解析HTML元素時(shí)，必須充分確保其結(jié)構(gòu)是被支持的。需要遵循layui的解析格式。
1.首先我們需要引入lay對(duì)應(yīng)的腳本文件和樣式文件。
2.在Html里，我們只需要?jiǎng)?chuàng)建一個(gè)空的div來(lái)生成分頁(yè)組件就行了，為這個(gè)div提供一個(gè)id。
3.在js腳本代碼上，我們先生成一個(gè)laypage的分頁(yè)組件實(shí)例對(duì)象。
4.然后調(diào)用這個(gè)對(duì)象的render方法來(lái)渲染出分頁(yè)的各個(gè)元素。
render方法里，我們傳入一個(gè)對(duì)象，elem就是div的id。
count是用來(lái)指示分頁(yè)的對(duì)象一共有多少條數(shù)據(jù)
5.運(yùn)行這樣的代碼，我們就可以看到這個(gè)渲染出來(lái)的分頁(yè)了，很簡(jiǎn)單的代碼，就得到了一個(gè)漂亮的分頁(yè)了。
6.從上面的數(shù)據(jù)我們可以看到，默認(rèn)情況下是一頁(yè)包含10條數(shù)據(jù)的。
當(dāng)然這個(gè)我們也是可以配置的，提供limit參數(shù)就行了，我們這里設(shè)置為4.
7.重新刷新頁(yè)面，可以看到，20條數(shù)據(jù)，每頁(yè)4行數(shù)據(jù)，可以看到現(xiàn)在就共分為5頁(yè)了。
8.分頁(yè)控件里，一個(gè)很重要的功能是需要交互，就是說(shuō)點(diǎn)擊了某一頁(yè)后，需要顯示對(duì)應(yīng)頁(yè)的數(shù)據(jù)。
因此組件提供了一個(gè)jump的方法來(lái)交互，這個(gè)方法里，會(huì)傳過(guò)來(lái)一個(gè)參數(shù)obj，這個(gè)obj我們可以得到一些常用的數(shù)據(jù)，比如obj.cur，得到的是當(dāng)前的頁(yè)碼。
obj.limit可以得到每一頁(yè)包含的數(shù)據(jù)數(shù)目。
layui怎么搭建后臺(tái)框架？
1.下載框架包
2.將layui文件夾拷入項(xiàng)目位置
3.頁(yè)面中導(dǎo)入layui.all.js layui.css和jquery即可完成配置
由于Layui部分內(nèi)置模塊依賴jQuery，所以我們將jQuery1.11最穩(wěn)定的一個(gè)版本作為一個(gè)內(nèi)置的DOM模塊（唯一的一個(gè)第三方模塊）。只有你所使用的模塊有依賴到它，它才會(huì)加載，并且如果你的頁(yè)面已經(jīng)script引入了jquery，它并不會(huì)重復(fù)加載。內(nèi)置的jquery模塊去除了全局的$和jQuery，是一個(gè)符合layui規(guī)范的標(biāo)準(zhǔn)模塊。
- 為什么表單不顯示？
當(dāng)你使用表單時(shí)，Layui會(huì)對(duì)select、checkbox、radio等原始元素隱藏，從而進(jìn)行美化修飾處理。但這需要依賴于form組件，所以你必須加載 form，并且執(zhí)行一個(gè)實(shí)例。值得注意的是：導(dǎo)航的Hover效果、Tab選項(xiàng)卡等同理（它們需依賴 element 模塊）
- 該如何加載模塊最科學(xué)？
事實(shí)上我們?cè)谀K規(guī)范已經(jīng)有明確地說(shuō)明，你可以采用預(yù)先加載和按需加載兩種模式，但后者我們并不推薦（文檔也解釋原因了）。因此我們強(qiáng)烈推薦的方式是：你應(yīng)該在你js文件的代碼最外層，就把需要用到的模塊 layui.use以 一下。
[修復(fù)] table 組件的 toolbar: true 時(shí)，在高版本 jQuery 下出現(xiàn)的報(bào)錯(cuò)問(wèn)題
[修復(fù)] table 組件的固定列高在某些情況未能鋪滿的問(wèn)題
[優(yōu)化] table 組件的單元格溢出下拉框，讓其不觸發(fā)行點(diǎn)擊事件
[修復(fù)] slider 組件在 max 參數(shù)設(shè)為某些數(shù)字（如 20）時(shí)，點(diǎn)擊 input 增減按鈕出現(xiàn)的異常問(wèn)題
[優(yōu)化] slider 組件局部代碼，以自動(dòng)糾正某些異常參數(shù)值
[修復(fù)] form 組件的 select 在空值狀態(tài)下雙擊，導(dǎo)致賦值了空值提示文本的問(wèn)題
【基本簡(jiǎn)介】
Layui 是一款采用自身模塊規(guī)范編寫(xiě)的情懷型前端UI框架，遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)。Layui 首個(gè)版本發(fā)布于2016年金秋，她區(qū)別于那些基于MVVM底層的UI框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說(shuō)，她更多是為服務(wù)端程序員量身定做，你無(wú)需涉足各種前端工具的復(fù)雜配置，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來(lái)。【框架特色】
- 返璞歸真身處在前端社區(qū)的繁榮之下，我們都在有意或無(wú)意地追逐。而Layui偏偏回望當(dāng)初，奔赴在返璞歸真的漫漫征途，自信并勇敢著，追尋于原生態(tài)的書(shū)寫(xiě)指令，試圖以最簡(jiǎn)單的方式詮釋高效。
- 雙面體驗(yàn)
擁有雙面的不僅是人生，還有Layui。一面極簡(jiǎn)，一面豐盈。極簡(jiǎn)是視覺(jué)所見(jiàn)的外在，是開(kāi)發(fā)所念的簡(jiǎn)易。豐盈是傾情雕琢的內(nèi)在，是信手拈來(lái)的承諾。一切本應(yīng)如此，簡(jiǎn)而全，雙重體驗(yàn)。
- 星辰大海
如果眼下還是一團(tuán)零星之火，那運(yùn)籌帷幄之后，迎面東風(fēng)，就是一場(chǎng)烈焰燎原吧，那必定會(huì)是一番盡情的燃燒。待，秋風(fēng)蕭瑟時(shí)，散作滿天星辰，你看那四季輪回，正是Layui不滅的執(zhí)念。
【軟件特性】
1、采用自身模塊規(guī)范編寫(xiě)，遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式；2、使用簡(jiǎn)單，門(mén)檻極低，拿來(lái)即用；
3、外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈；
4、從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)；
5、更多是為服務(wù)端程序員量身定做，你無(wú)需涉足各種前端工具的復(fù)雜配置，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來(lái)；
6、兼容人類(lèi)正在使用的全部瀏覽器（IE6/7除外），可作為PC端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開(kāi)發(fā)方案。
【使用方法】
1.在本站下載完成后解壓文件：如圖文件目錄格式，可以直接將js和css文件引入項(xiàng)目中使用，2.實(shí)例：引入layui的核心文件，
<script src=layui/layui/layui.js></script>
<link href=layui/layui/css/layui.css>
如何在hbuilder中引入layui的核心文件，zhi'xu只需要引入核心文件即可，其他的在使用過(guò)程中會(huì)自動(dòng)引入，
3.頁(yè)面加載完成直接運(yùn)行彈出hello world。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>
<title></title>
<script src=layui/layui/layui.js></script>
<link href=layui/layui/css/layui.css>
</head>
<body>
<body>
<script>
//一般直接寫(xiě)在一個(gè)js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
layer.msg('Hello World');
});
</script>
</body>
</html>
4.layui.use(['layer', 'form'], function(){
var layer = layui.layer;
layer.msg('Hello World');
});
官網(wǎng)首頁(yè)的實(shí)例：layui.use為固定格式，[layer，form]分別為自動(dòng)引入的layer.js和form.js文件，為框架自動(dòng)引入
5.如果你想采用非模塊化方式（即所有模塊一次性加載，盡管我們并不推薦你這么做），你也可以按照下面的方式使用：
<script>
;!function(){
var layer = layui.layer
layer.msg('Hello World');
}();
</script>
6.注意<script></script>中的格式；！是不能夠丟的，在最后還有（）這是layui的固定格式，也是必須有的
7.Layui在解析HTML元素時(shí)，必須充分確保其結(jié)構(gòu)是被支持的。需要遵循layui的解析格式。
【使用技巧】
layui的分頁(yè)怎么用？1.首先我們需要引入lay對(duì)應(yīng)的腳本文件和樣式文件。
2.在Html里，我們只需要?jiǎng)?chuàng)建一個(gè)空的div來(lái)生成分頁(yè)組件就行了，為這個(gè)div提供一個(gè)id。
3.在js腳本代碼上，我們先生成一個(gè)laypage的分頁(yè)組件實(shí)例對(duì)象。
4.然后調(diào)用這個(gè)對(duì)象的render方法來(lái)渲染出分頁(yè)的各個(gè)元素。
render方法里，我們傳入一個(gè)對(duì)象，elem就是div的id。
count是用來(lái)指示分頁(yè)的對(duì)象一共有多少條數(shù)據(jù)
5.運(yùn)行這樣的代碼，我們就可以看到這個(gè)渲染出來(lái)的分頁(yè)了，很簡(jiǎn)單的代碼，就得到了一個(gè)漂亮的分頁(yè)了。
6.從上面的數(shù)據(jù)我們可以看到，默認(rèn)情況下是一頁(yè)包含10條數(shù)據(jù)的。
當(dāng)然這個(gè)我們也是可以配置的，提供limit參數(shù)就行了，我們這里設(shè)置為4.
7.重新刷新頁(yè)面，可以看到，20條數(shù)據(jù)，每頁(yè)4行數(shù)據(jù)，可以看到現(xiàn)在就共分為5頁(yè)了。
8.分頁(yè)控件里，一個(gè)很重要的功能是需要交互，就是說(shuō)點(diǎn)擊了某一頁(yè)后，需要顯示對(duì)應(yīng)頁(yè)的數(shù)據(jù)。
因此組件提供了一個(gè)jump的方法來(lái)交互，這個(gè)方法里，會(huì)傳過(guò)來(lái)一個(gè)參數(shù)obj，這個(gè)obj我們可以得到一些常用的數(shù)據(jù)，比如obj.cur，得到的是當(dāng)前的頁(yè)碼。
obj.limit可以得到每一頁(yè)包含的數(shù)據(jù)數(shù)目。
layui怎么搭建后臺(tái)框架？
1.下載框架包
2.將layui文件夾拷入項(xiàng)目位置
3.頁(yè)面中導(dǎo)入layui.all.js layui.css和jquery即可完成配置
【常見(jiàn)問(wèn)題】
- 如何使用內(nèi)部jQuery？由于Layui部分內(nèi)置模塊依賴jQuery，所以我們將jQuery1.11最穩(wěn)定的一個(gè)版本作為一個(gè)內(nèi)置的DOM模塊（唯一的一個(gè)第三方模塊）。只有你所使用的模塊有依賴到它，它才會(huì)加載，并且如果你的頁(yè)面已經(jīng)script引入了jquery，它并不會(huì)重復(fù)加載。內(nèi)置的jquery模塊去除了全局的$和jQuery，是一個(gè)符合layui規(guī)范的標(biāo)準(zhǔn)模塊。
- 為什么表單不顯示？
當(dāng)你使用表單時(shí)，Layui會(huì)對(duì)select、checkbox、radio等原始元素隱藏，從而進(jìn)行美化修飾處理。但這需要依賴于form組件，所以你必須加載 form，并且執(zhí)行一個(gè)實(shí)例。值得注意的是：導(dǎo)航的Hover效果、Tab選項(xiàng)卡等同理（它們需依賴 element 模塊）
- 該如何加載模塊最科學(xué)？
事實(shí)上我們?cè)谀K規(guī)范已經(jīng)有明確地說(shuō)明，你可以采用預(yù)先加載和按需加載兩種模式，但后者我們并不推薦（文檔也解釋原因了）。因此我們強(qiáng)烈推薦的方式是：你應(yīng)該在你js文件的代碼最外層，就把需要用到的模塊 layui.use以 一下。
【更新日志】
[修復(fù)] table 組件中勾選全選后，再點(diǎn)擊任意行復(fù)選框無(wú)法獲取到值的問(wèn)題[修復(fù)] table 組件的 toolbar: true 時(shí)，在高版本 jQuery 下出現(xiàn)的報(bào)錯(cuò)問(wèn)題
[修復(fù)] table 組件的固定列高在某些情況未能鋪滿的問(wèn)題
[優(yōu)化] table 組件的單元格溢出下拉框，讓其不觸發(fā)行點(diǎn)擊事件
[修復(fù)] slider 組件在 max 參數(shù)設(shè)為某些數(shù)字（如 20）時(shí)，點(diǎn)擊 input 增減按鈕出現(xiàn)的異常問(wèn)題
[優(yōu)化] slider 組件局部代碼，以自動(dòng)糾正某些異常參數(shù)值
[修復(fù)] form 組件的 select 在空值狀態(tài)下雙擊，導(dǎo)致賦值了空值提示文本的問(wèn)題
精品軟件
用戶評(píng)論
（您的評(píng)論需要經(jīng)過(guò)審核才能顯示）
共0人參與,0條評(píng)論