layui 的基本使用介紹

cscw發表於2020-10-26
UI

全域性配置

layui.config({
   dir: '/res/layui/' //layui.js 所在路徑（注意，如果是script單獨引入layui.js，無需設定該引數。），一般情況下可以無視
  ,version: false //一般用於更新模組快取，預設不開啟。設為true即讓瀏覽器不快取。也可以設為一個固定的值，如：201610
  ,debug: false //用於開啟除錯模式，預設false，如果設為true，則JS模組的節點會保留在頁面
  ,base: '' //設定擴充套件的Layui模組的所在目錄，一般用於外部模組擴充套件
});

定義模組

方法：layui.define([mods], callback)

layui.define(function(exports){
  //do something
  exports('demo', function(){
    alert('Hello World!');
  });
});

載入所需模組

layui.use(['laypage', 'layedit'], function(){
  var laypage = layui.laypage
  ,layedit = layui.layedit
  //do something
});

layui.use(['laypage', 'layedit'], function(laypage, layedit){
  //使用分頁
  laypage();
  //建立編輯器
  layedit.build();
});

動態載入CSS

  • layui.link(href)

本地儲存

本地儲存是對 localStorage 和 sessionStorage 的友好封裝，可更方便地管理本地資料。

  • localStorage 持久化儲存：layui.data(table, settings)，資料會永久存在，除非物理刪除。
  • sessionStorage 會話性儲存：layui.sessionData(table, settings)，頁面關閉後即失效。注：layui 2.2.5 新增

獲取裝置資訊

  • layui.device(key)

其它

方法 屬性 描述
layui.cache 靜態屬性。獲得一些配置及臨時的快取資訊
layui.extend(options) 擴充一個模組別名，如：layui.extend({test: '/res/js/test'})
layui.each(obj, fn) 物件（Array、Object、DOM物件等）遍歷，可用於取代for語句
layui.getStyle(node, name) 獲得一個原始DOM節點的style屬性值，如：layui.getStyle(document.body, 'font-size')
layui.img(url, callback, error) 圖片預載入
layui.sort(obj, key, desc) 將陣列中的物件按某個成員重新對該陣列排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], 'a')
layui.router() 獲得location.hash路由，目前在Layui中沒發揮作用。對做單頁應用會派上用場。
layui.hint() 向控制檯列印一些異常資訊，目前只返回了error方法：layui.hint().error('出錯啦')
layui.stope(e) 阻止事件冒泡
layui.onevent(modName, events, callback) 自定義模組事件，屬於比較高階的應用。有興趣的同學可以閱讀layui.js原始碼以及form模組
layui.event(modName, events, params) 執行自定義模組事件，搭配onevent使用
layui.factory(modName) 用於獲取模組對應的 define 回撥函式

模組名稱空間

layui 的模組介面會繫結在 layui 物件下，內部由 layui.define() 方法來完成。每一個模組都會一個特有的名字，並且無法被佔用。所以你無需擔心模組的空間被汙染，除非你主動 delete layui.{模組名}。呼叫模組可通過 layui.use 方法來實現，然後再通過 layui 物件獲得模組介面。

如何使用內部jQuery

//主動載入jquery模組
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重點處
  ,layer = layui.layer;
  
  //後面就跟你平時使用jQuery一樣
  $('body').append('hello jquery');
});

layui官方文件

相關文章