廊坊新聞網(wǎng)-主流媒體,廊坊城市門戶

    環(huán)球熱消息:Layui 2.8 正式發(fā)布,本文詳細(xì)介紹所有新特性

    2023-04-25 10:38:33 來源:開源中國(guó)

    layui2.8已經(jīng)于今天正式發(fā)布了,新增優(yōu)化了大量特性,這里按照l(shuí)ayui更新日志的模塊結(jié)構(gòu),詳細(xì)為你一一介紹。

    基礎(chǔ)

    風(fēng)格調(diào)整

    新版調(diào)整主色調(diào)為#16baaa,在原有的墨綠基礎(chǔ)上賦予了清新。


    (資料圖片僅供參考)

    更簡(jiǎn)單的構(gòu)建

    構(gòu)建代碼更簡(jiǎn)單,除字體外,只有js和css兩個(gè)文件:

    layui-v2.8.0          ├─ css                │  └─ layui.css       ├─ font               │  ├─ iconfont.eot    │  ├─ iconfont.svg    │  ├─ iconfont.ttf    │  ├─ iconfont.woff   │  └─ iconfont.woff2  └─ layui.js           

    相比原有的目錄結(jié)構(gòu):

    layui                         ├─ css                        │  ├─ modules                 │  │  ├─ laydate              │  │  │  └─ default           │  │  │     └─ laydate.css    │  │  ├─ layer                │  │  │  └─ default           │  │  │     ├─ icon-ext.png   │  │  │     ├─ icon.png       │  │  │     ├─ layer.css      │  │  │     ├─ loading-0.gif  │  │  │     ├─ loading-1.gif  │  │  │     └─ loading-2.gif  │  │  └─ code.css             │  └─ layui.css               ├─ font                       │  ├─ iconfont.eot            │  ├─ iconfont.svg            │  ├─ iconfont.ttf            │  ├─ iconfont.woff           │  └─ iconfont.woff2          └─ layui.js                   

    將原先 layer/laydate/code 的 css 統(tǒng)一構(gòu)建到 layui.css,以盡量減少請(qǐng)求,同時(shí)原有的圖片資源全部替換為純CSS實(shí)現(xiàn)。

    舍棄layedit

    新版正式的舍棄掉了內(nèi)置的富文本編輯器,畢竟富文本編輯器本身就是深不見底的坑,在各個(gè)UI庫(kù)或框架中也沒有內(nèi)置,算是拋掉了歷史包袱。如果有需要可以自行選擇其他優(yōu)秀的編輯器:

    tinymce ckeditor simditor wangeditor quill

    新增18個(gè)字體圖標(biāo)

    布局支持超大屏幕

    新增了xl的超大屏幕自適應(yīng)標(biāo)記。

    其他優(yōu)化

    其中還優(yōu)化了lay.options layui.event方法的表現(xiàn)。

    Layer

    動(dòng)畫設(shè)置

    通過anim參數(shù)實(shí)現(xiàn)四個(gè)彈出方向的動(dòng)畫類,可實(shí)現(xiàn)邊緣抽屜彈出,同時(shí)關(guān)閉時(shí)自動(dòng)匹配對(duì)應(yīng)的動(dòng)畫。

    WIN10風(fēng)格彈框

    新增了一個(gè)win10風(fēng)格的確認(rèn)框,當(dāng)你給客戶打包成客戶端時(shí),或許能要到更多的預(yù)算?

    回調(diào)增加參數(shù)

    新增 success 等回調(diào)的第三個(gè)參數(shù):即當(dāng)前彈層實(shí)例對(duì)象,以便操作內(nèi)部方法。

    layer.open({  type: 1,  content: "內(nèi)容",  success: function(layero, index, that){    // 彈層的最外層元素的 jQuery 對(duì)象    console.log(layero);    // 彈層的索引值    console.log(index);    // 彈層內(nèi)部原型鏈中的 this --- 2.8+    console.log(that);  }});

    photos彈框增加底欄

    新增 photos 層的私有屬性 hideFooter,用于控制是否隱藏圖片底部欄。

    新增 photos 層底部欄的「查看原圖」功能。

    新增 photos 層對(duì) lay-src 屬性的支持。

    其他

    彈框輸入框支持自定義placeholder 增加了layer.closeLast關(guān)閉最近打開的彈框 優(yōu)化了底層相關(guān)事件的處理 修復(fù)了若干問題

    table

    表格組件進(jìn)行了大量的特性更新,這里不再摘抄,有需要可以自行查看。表格組件更加完善健壯。

    樹形table組件

    本次更新增加了樹形表格組件,以后不需要找插件了。

    form

    優(yōu)化了select樣式,同時(shí)對(duì)于搜索選擇,優(yōu)化了刪除關(guān)鍵字的表現(xiàn)。

    單選框和復(fù)選框支持html的標(biāo)題

    其他

    優(yōu)化了單選和多選的更多表現(xiàn),具體可以查看日志,這里不再摘錄。

    日期組件

    日期選擇組件也得到的加強(qiáng),增加了許多特性。

    日期快捷欄

    新增 shortcuts 屬性,用于開啟面板左側(cè)的快捷選擇功能 。

    全面板模式

    將日期和時(shí)間同時(shí)顯示,而不需要單獨(dú)點(diǎn)開設(shè)置。

    內(nèi)置多主題

    范圍選擇的input聯(lián)動(dòng)

    注意,下面截圖中,實(shí)際上有兩個(gè)input標(biāo)簽。

    更多效果

    增加了國(guó)際模式,還增加了公歷節(jié)日、國(guó)際節(jié)日等標(biāo)注,同時(shí)支持自定義標(biāo)注日期。

    其他

    日期組件還進(jìn)行了大量操作的更新,這里不再記錄。

    下拉菜單

    下拉菜單組件也得到了強(qiáng)化,比如重載數(shù)據(jù)、陰影面板等, 同時(shí)也增加了很多效果。

    在表格中使用

    自定義觸發(fā)事件

    右鍵菜單出發(fā)

    也支持全部頁(yè)面綁定右鍵事件。

    自定義菜單內(nèi)容

    導(dǎo)航

    新增淺色主體導(dǎo)航。

    底層方法

    2.8增加了幾個(gè)常用的底層方法,會(huì)給開發(fā)帶來極大的便利。

    鏈接解析

    解析url為一個(gè)數(shù)組。

    / 假設(shè)當(dāng)前頁(yè)面 url 為: https://domain.com/docs/base.html?a=1&c=3#/user/set/id=123/var url = layui.url();// url 返回結(jié)果為:{  "pathname": ["docs","base.html"], // 路徑  "search": {"a":"1","c":"3"}, // 參數(shù)  "hash": { // hash 解析    "path": ["user","set",""], // hash 中的路徑    "search": {"id":"123"}, // hash 中的參數(shù)    "hash": "",  // hash 中的 hash    "href": "/user/set/id=123/"  // hash 中的完整鏈接  }}

    本地存儲(chǔ)

    如今越來越多的前端都會(huì)用到瀏覽器localstorage,但是又希望通過一個(gè)封裝庫(kù)去操作,以取得更好地瀏覽器兼容性。其實(shí)

    本地存儲(chǔ)是對(duì) localStorage 和 sessionStorage 的友好封裝,可更方便地管理本地?cái)?shù)據(jù)。方法如下:

    layui.data(table, settings);即 localStorage,數(shù)據(jù)在瀏覽器中的持久化存儲(chǔ),除非物理刪除。 layui.sessionData(table, settings);即 sessionStorage ,數(shù)據(jù)在瀏覽器中的會(huì)話性存儲(chǔ),頁(yè)面關(guān)閉后即失效。

    兩者使用方式完全一致。其中參數(shù) table為表名,settings是一個(gè)對(duì)象,用于設(shè)置 key/value。下面以 layui.data()方法為例:

    // 【增】:向 test 表插入一個(gè) nickname 字段,如果該表不存在,則自動(dòng)建立。layui.data("test", {  key: "nickname",  value: "張三"});// 【刪】:刪除 test 表的 nickname 字段layui.data("test", {  key: "nickname",  remove: true});layui.data("test", null); // 刪除 test 表// 【改】:同【增】,會(huì)覆蓋已經(jīng)存儲(chǔ)的數(shù)據(jù)// 【查】:向 test 表讀取全部的數(shù)據(jù)var localTest = layui.data("test");console.log(localTest.nickname); // 獲得“張三”

    瀏覽器信息

    var device = layui.device(key);

    參數(shù) key 可選。可利用該方法對(duì)不同的設(shè)備進(jìn)行差異化處理,device 即為不同設(shè)備下返回的不同信息,如下

    {  os: "windows", // 當(dāng)前瀏覽器所在的底層操作系統(tǒng),如:Windows、Linux、Mac 等  ie: false, // 當(dāng)前瀏覽器是否為 ie6-11 的版本,如果不是 ie 瀏覽器,則為 false  weixin: false, // 當(dāng)前瀏覽器是否為微信 App 環(huán)境  android: false, // 當(dāng)前瀏覽器是否為安卓系統(tǒng)環(huán)境  ios: false, // 當(dāng)前瀏覽器是否為 IOS 系統(tǒng)環(huán)境  mobile: false // 當(dāng)前瀏覽器是否為移動(dòng)設(shè)備環(huán)境(v2.5.7 新增)}

    layui.link(href)

    加載 CSS,href 即為 css 路徑。一般用于動(dòng)態(tài)加載你的外部 CSS 文件

    layui.getStyle(node, name)

    獲得一個(gè)原始 DOM 節(jié)點(diǎn)的 style 屬性值,如: layui.getStyle(document.body, "font-size")

    layui.each(obj, callback)

    對(duì)象(Array、Object、DOM 對(duì)象等)遍歷,可用于取代 for 語(yǔ)句

    layui.sort(obj, key, desc)

    將數(shù)組中的對(duì)象按某個(gè)成員重新對(duì)該數(shù)組排序,如:layui.sort([{a: 3},{a: 1},{a: 5}], "a"); // 返回:[{"a":1},{"a":3},{"a":5}]

    其他

    除了上面介紹的,2.8還有更多的新增的特性和優(yōu)化。比如:增強(qiáng)了顏色選擇器的操作,增強(qiáng)了輪播的操作,增強(qiáng)了代碼預(yù)覽,增強(qiáng)了utils類和更多細(xì)節(jié)的方法。

    升級(jí)兼容性

    2.8的版本對(duì)老版本兼容非常好,如果你的layui是2.7.6,那么基本上可以做到無(wú)縫升級(jí)。我自己有一個(gè)開源的后臺(tái)框架ulthon_admin,現(xiàn)在已經(jīng)升級(jí)到2.8.0了,可以具體參考一下升級(jí)的文件變化,基本上只要把主體的js和css換掉就可以了。

    其次如果你有定制的layer的樣式,那么要注意修改,layer彈框的右上角操作圖標(biāo)已經(jīng)不再是圖片,而是純css實(shí)現(xiàn),可能你需要注意一下。

    除此之外,layui2.8對(duì)老版本的兼容性非常好,趕快升級(jí)到2.8吧,享受ayui更多的特性。

    最后

    祝layui越做越好。layui基本上已經(jīng)成為“傳統(tǒng)前端”最流行的ui庫(kù)了,而現(xiàn)在layui自從將社區(qū)遷移到gitee之后,過濾掉了大量“無(wú)知”的開發(fā)者,更多的“認(rèn)真”的開發(fā)者都沉淀下來,將來也會(huì)越發(fā)展越好。

    原文標(biāo)題:Layui2.8正式發(fā)布,本文詳細(xì)介紹所有新特性

    原文地址:https://phpreturn.com/index/a6446527cab7e0.html

    原文平臺(tái):PHP武器庫(kù)

    版權(quán)聲明:本文由phpreturn.com(PHP武器庫(kù)官網(wǎng))原創(chuàng)和首發(fā),所有權(quán)利歸phpreturn(PHP武器庫(kù))所有,本站允許任何形式的轉(zhuǎn)載/引用文章,但必須同時(shí)注明出處。

    關(guān)鍵詞:

    蜜桃传媒一区二区亚洲AV| 亚洲日本va在线观看| 亚洲人成自拍网站在线观看| 亚洲欧洲视频在线观看| 亚洲一区二区三区高清| 亚洲精选在线观看| 久久亚洲精品无码AV红樱桃| 久久久久亚洲精品天堂| 亚洲精品电影天堂网| 中文字幕亚洲综合久久| 亚洲视频在线免费观看| 亚洲高清在线mv| 亚洲免费观看网站| 亚洲综合色一区二区三区| 亚洲精品无码专区| 色五月五月丁香亚洲综合网| 亚洲äv永久无码精品天堂久久 | 亚洲AV无码一区二区三区在线| 亚洲欧洲精品久久| 波多野结衣亚洲一级| 亚洲日韩国产二区无码| 色天使色婷婷在线影院亚洲| yy6080久久亚洲精品| MM131亚洲国产美女久久| 亚洲精品午夜国产VA久久成人 | 激情综合亚洲色婷婷五月| 亚洲中文无码mv| 看亚洲a级一级毛片| 亚洲午夜日韩高清一区| 亚洲欧洲∨国产一区二区三区| 精品亚洲综合久久中文字幕| 亚洲国产成人久久综合碰碰动漫3d| 久久综合亚洲色HEZYO社区| 亚洲制服丝袜中文字幕| 亚洲av午夜电影在线观看| 亚洲国产成人久久综合碰| 亚洲精品高清无码视频| 亚洲一区二区影院| 2020久久精品亚洲热综合一本| 亚洲AV无码之国产精品| 亚洲午夜av影院|