layui是一款专业的经典化前端框架,軟件采用HTML/CSS/JS的模式,用户无需涉足各种前段工具的复杂配置,只需面对浏览器本身,一切你需要的元素与交互,layui都可以轻松搞定。如果您需要这样一款简单好用的前段框架,不妨下载layui试试!

基本介紹
2016年10月,名不见经传的layui凭借layer多年来积累下来的人气获得了一定关注,从1.0.0的首个版本发布至今,已经满月,layui已进行了三次中小规模的迭代。它并没有迎合当下那些炙手可热的前端主流,有意或无意地避开了React/Vue等风向,专注于原生态的开发模式,试图成为国内更容易入门和使用的前端UI解决方案。正是因为这样的追求,我们无惧险阻、无畏任何挑战。layui下一个大版本已经进入了开发日程,它将弥补当前版本存在的诸多缺陷,有可能直接跳跃到 2.0,你尽管放心地期待,它基本无缝兼容1.x。
layui定義爲“經典模塊化”,並非是自吹她自身有多優秀,而是繞開JS社區的喧囂,以最簡單的方式去诠釋高效。她的所謂經典,是在于對返璞歸真的執念,她以當前浏覽器普通認可的方式去組織模塊。我們認爲,這恰是符合當下國內絕大多數程序員從舊時代過度到未來新標准的最佳指引。
layui特色
一、返璞歸真
前端社區正在變得日漸喧囂,我們似乎很難停下追逐的腳步。而Layui偏偏回望當初,奔赴在返璞歸真的漫漫征途,自信並勇敢著,追尋于原生態的書寫指令,試圖以最簡單的方式诠釋高效。
二、雙面體驗
擁有雙面的不僅是人生,還有Layui。一面極簡,一面豐盈。極簡是視覺所見的外在,是開發所念的簡易。豐盈是傾情雕琢的內在,是信手拈來的承諾。一切本應如此,簡而全,雙重體驗。
三、星辰大海
如果眼下還是一團零星之火,那運籌帷幄之後,迎面東風,就是一場烈焰燎原吧,那必定會是一番盡情的燃燒。待,秋風蕭瑟時,散作滿天星辰,你看那海天相接,正是Layui不滅的執念。
layui使用教程
獲得layui後,將其完整地部署到你的項目目錄(或靜態資源服務器),你只需要引入下述兩個文件:
沒錯,不用去管其它任何文件。因爲他們(比如各模塊)都是在最終使用的時候才會自動加載。這是一個基本的入門頁面:
1、規範化的用法(推薦)
如果你想快速使用Layui的組件,你還是跟平時一樣script標簽引入你的js文件,然後在你的js文件中使用layui的組件。但我們更推薦你遵循Layui的模塊規範,建立一個自己的模塊作爲入口:
上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:
2、簡單粗暴用法
如果你覺得Layui的模塊化還是有點啰嗦,木有關系的親。Layui考慮到了像你一樣的猿群,我們將layui.js及所有模塊單獨打包合並成了一個完整的js文件,用的時候直接引入這一個文件即可。當你采用這樣的方式,你將不用通過layui.use加載模塊,你只需要直接用,譬如:
但你必須知道,這種使用方式,意味著Layui的模塊化已經失去了它的意義。但不可否認,它比什麽都來的簡單。
好了,不管你采用什麽樣的方式,從現在開始,盡情地使用Layui吧!但願這是一段美妙的旅程。
常見問題
- 如何使用内部jQuery?
由于Layui部分內置模塊依賴jQuery,所以我們將jQuery1.11最穩定的一個版本作爲一個內置的DOM模塊(唯一的一個第三方模塊)。只有你所使用的模塊有依賴到它,它才會加載,並且如果你的頁面已經script引入了jquery,它並不會重複加載。內置的jquery模塊去除了全局的$和jQuery,是一個符合layui規範的標准模塊。
- 为什么表单不显示?
当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)
- 该如何加载模块最科学?
事实上我们在模块规范已经有明确地说明,你可以采用预先加载和按需加载两种模式,但后者我们并不推荐(文档也解释原因了)。因此我们强烈推荐的方式是:你应该在你js文件的代码最外层,就把需要用到的模块 layui.use以 一下。
更新日志
[修复] table 组件中勾选全选后,再点击任意行复选框无法获取到值的问题
[修复] table 组件的 toolbar: true 时,在高版本 jQuery 下出现的报错问题
[修复] table 组件的固定列高在某些情况未能铺满的问题
[优化] table 组件的单元格溢出下拉框,让其不触发行点击事件
[修复] slider 组件在 max 参数设为某些数字(如 20)时,点击 input 增减按钮出现的异常问题
[优化] slider 组件局部代码,以自动纠正某些异常参数值
[修复] form 组件的 select 在空值状态下双击,导致赋值了空值提示文本的问题