layui-學習01-基本api

全局配置

layui.config({
  dir: '/res/layui/', 　//layui.js 所在路徑（注意，若是是script單獨引入layui.js，無需設定該參數。），通常狀況下能夠無視
  version: false,　　　　//通常用於更新模塊緩存，默認不開啓。設爲true即讓瀏覽器不緩存。也能夠設爲一個固定的值，如：201610
  debug: false, 　　  //用於開啓調試模式，默認false，若是設爲true，則JS模塊的節點會保留在頁面
  base: '' 　　　　　　//設定擴展的Layui模塊的所在目錄，通常用於外部模塊擴展
});

 

定義模塊

 

//["layer", "laytpl", "utils", "tree"] 依賴的模塊

layui. define([ "layer", "laytpl", "utils", "tree"], function ( exports) {

　　var layer = layui.layer,

　　　　utils = layui.utils,

　　　　tree = layui.tree;

　　//導出

　　exports( 'departmentSel', function ( options) {

　　});

});

 

加載模塊

 

layui. use([ 'laytpl', 'form', 'utils', 'layer'], function () {

var laytpl = layui.laytpl,

　　form = layui.form,

　　utils = layui.utils,

　　layer = layui.layer;

});

 

動態加載CSS

方法：layui.link(href)

 

本地存儲

 

方法：layui.data(table, settings)

//【增】
layui.data('test', {
  key: 'nickname'
  ,value: '賢心'
});

//【刪】
layui.data('test', null); //刪除test表
 
//【改】：同【增】，會覆蓋已經存儲的數據
 
//【查】
var localTest = layui.data('test').nickname  //得到「賢心」

　　

獲取設備信息

var device = layui.device();

device便可根據不一樣的設備返回下述不一樣的信息

{
  os: "windows" //底層操做系統，windows、linux、mac等
  ,ie: false //ie6-11的版本，若是不是ie瀏覽器，則爲false
  ,weixin: false //是否微信環境
  ,android: false //是否安卓系統
  ,ios: false //是否ios系統
}

　　

其餘

方法/屬性	描述
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 模塊

第一步：確認模塊名，假設爲：mymod，而後新建一個mymod.js 文件放入項目任意目錄下（注意：不用放入layui目錄）

第二步：編寫test.js 以下：

layui.define(function(exports){ //提示：模塊也能夠依賴其它模塊，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };
  exports('mymod', obj);
});

第三步：設定擴展模塊所在的目錄，而後就能夠在別的JS文件中使用了

//config的設置是全局的
layui.config({
  base: '/res/js/' //假設這是你存放拓展模塊的根目錄
}).extend({ //設定模塊別名
  mymod: 'mymod' //若是 mymod.js 是在根目錄，也能夠不用設定別名
  ,mod1: 'admin/mod1' //相對於上述 base 目錄的子目錄
});
//使用拓展模塊
layui.use(['mymod', 'mod1'], function(){
  var mymod = layui.mymod.hello('World!'); //彈出 Hello World!
});