Layui 2.0.0 正式發佈：潛心之做，開箱即用的前端UI框架（確實不少內容）

Hi，久違了。處暑逼近之際，潛水半年的 layui 是時候出來透透氣了。咱們帶來的是全新的 2.0 版本，一次被咱們定義爲「破繭重生」的傾情之做。若是你已曾用過 layui，你將真正感覺到一次因小而大、因弱而強的成長。在前端MVVM野蠻生長的時代，layui 這樣一個近乎有些不隨潮流的UI解決方案，依舊在守望它的執念。它所呈現的不單單是一項項信手拈來的元素，更可能是關於UI設計理念的表達。不驕不躁，親和而富有生命力。返璞歸真，卻非逆道而行。

2.0 是 layui 的一次里程碑式版本，它的意義並不僅是那幾項膚淺的更新，而是自此開始，layui 進入一段復活之旅。

更新日誌

Table 表格

•   新增的全新模塊，用於對錶格進行一些列功能和動態數據操做

•   支持固定表頭、固定行、固定列左/列右

•   支持拖拽改變列寬度

•   支持多級表頭

•   支持大表格、小表格、默認表格的任意尺寸設定

•   支持多種表格風格設定

•   支持「Ajax接口獲取」、「直接賦值數據」、「轉化現有表格」三種初始化渲染方式

•   支持單元格的自定義模板

•   支持對錶格重載（好比搜索、條件篩選等）

•   內置checkbox複選框功能

•   內置自定義工具條及相關操做功能

•   內置分頁功能

•   內置字段排序功能

•   內置單元格編輯功能

•   內置顯示單元格更多內容功能

Carousel 輪播

•   新增的全新模塊，用於處理頁面輪播邏輯

•   支持圖片、文字列表等任意內容的切換

•   支持普通輪播和全屏輪播（FullPage）的設定

•   支持多種切換動畫的設定

•   支持是否自動切換、自動切換的時間間隔的設定

•   支持初始開始的條目索引的設定

•   支持箭頭和指示器的風格和位置設定

Layout 佈局

•   新增柵格佈局系統

•   柵格採用12等分，內置移動設備、平板、桌面中等和大型屏幕的響應式處理

•   柵格支持分欄間隔、列偏移、嵌套，流體佈局等

•   柵格最低能支持到ie8

•   新增後臺大框架佈局現成方案

layDate 日期時間選擇器

•   全面重寫，可做爲獨立組件（版本直接躍升爲 5.0）

•   依舊採用原生JavaScript編寫，零依賴，可在layui中做爲模塊使用，也可做爲獨立組件使用

•   支持單獨顯示年選擇器、年月選擇器、日期選擇器、時間選擇器、日期時間選擇器

•   支持雙控件，用於選擇年/年月/日期/時間/日期時間五種類型選擇器的範圍（可順時、逆時）

•   支持日期格式的自定義

•   支持日期是否合法的自動校驗

•   支持有效日期範圍的設定

•   支持內置事件（可自定義）、外部事件、直接顯示等多種調用方式

•   支持中文版和國際版的語言設定

•   支持開啓公曆節日和標記重要日期

•   支持直接嵌套在頁面的某個容器中

•   支持底部按鈕的任意順序排版

•   支持智能顯示在最佳可視座標

•   支持回車快捷鍵選擇

•   支持多種內置主題的設定，支持自定義主題色，且可單獨定製主題

Upload 上傳

•   全面重寫

•   可指定任意元素（如按鈕、普通div等）來觸發上傳

•   支持選擇後自動上傳和手工上傳兩種模式

•   支持附加參數、支持自定義文件name等

•   支持多文件上傳（ie8/9除外）

•   支持拖拽文件上傳（ie8/9除外）

•   支持文件大小限制，單位kb（ie8/9除外）

•   支持圖片上傳前預覽（ie8/9除外）

•   支持文件跨域上傳（ie8/9除外）

layPage 分頁

•   核心代碼和接口重寫

•   新增「數據總數」、「每頁條數」顯示區域

•   支持自定義排版

•   新增count參數，用於獲得數據總數，並剔除了pages參數（分頁總數）

•   新增limits參數，用於設定每頁條數的選擇項

•   新增limit參數，用於設定每頁條數的默認項

•   優化跳頁框在輸入非數字時的校驗

•   總頁數低於2時，仍然輸出分頁結構（前面版本不會顯示）

•   尾頁文本默認顯示爲總頁數

•   跳頁框若是輸入的頁碼大於最大頁數，則自動跳到最大頁

•   樣式優化

Form 表單集合

•   select組件增長自動上下判斷，用於顯示在最佳可視區域

•   select組件容許出現「請選擇」的空值選項

•   form.render(type, filter)方法增長第二個參數，用於指定某個區域進行局部渲染

•   優化複選框樣式，以更友好地用於非form場景中

•   form.on方法支持鏈式寫法

Layer 彈層

•   同步到最新的 layer v3.1.0

•   增長maxHeight參數，用於設定彈層的最大高度

•   對默認按鈕顏色、Tips層、Prompt層、Tab層等進行了樣式微調，以便更顯大氣，且更符合layui風格

Element 頁面元素

•   新增時間軸元素

•   新增徽章元素

•   新增動畫CSS類文檔

•   導航UI細節優化，並新增三種主題色支持：墨綠/藏青/藍

•   導航支持加入圖片

•   分割線新增可支持的顏色：赤/橙/墨綠/藏青/藍/黑/灰

•   Tab選項卡UI微調

•   element模塊輸出的接口由先前的函數改成對象

Util 工具集

•   新增倒計時方法：util.countdown()

•   新增用於獲得「某個時間在當前時間的多久前」的方法：util.timeAgo()

•   [固定塊] 新增 showHeight 參數，用於控制出現TOP按鈕的滾動條高度臨界值

底層方法

•   新增 layui.sort(obj, key, desc) 方法，用於將數組中的對象按某個成員從新對該數組排序

•   改寫layui.router()方法，以更好地解析location.hash的單頁URL規則

其它更改

•   新增28個字體圖標

•   剔除全局滾動條樣式

•   獲取內置的jQuery接口，可經過 var $ = layui.$; 獲得，以前的 layui.jquery仍然可用

•   layui.css大量樣式結構優化

Bug Fix

•   修復select組件在沒有任何option的狀況下報錯的問題

•   修復導航多個排列在一塊兒時，hover出現異常的問題

•   修復layui.device()方法在Chrome設備模式沒法識別ios環境的問題

•   修復IE下，屢次執行layui.use加載同一個模塊時，控制檯出現多條重複請求的問題（實際上不是真實請求）

1.x 升 2.0 特別注意事項

•   layDate日期模塊、layPage分頁模塊、Upload上傳模塊等等，均已徹底重寫，請按照最新文檔修改

•   獲取 Form 模塊接口，由以前的 var form = layui.form() 改成：var form = layui.form

•   獲取 Element 模塊接口，由以前的 var element = layui.element() 改成：var element = layui.element

•   layui.all.js 的目錄調整到跟 layui.js 的同級目錄，若有使用到 layui.all.js，請注意修改路徑

•   因爲改動較大，2.0其實並不兼容1.x，強烈不推薦覆蓋升級。官網仍會保留 1.x 的存檔，最好按需升級。

完整更新日誌

快速上手

 

http://www.oschina.net/news/87927/layui-2-0-0-released