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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM