宁可一次一次去撞南墙,也不能一个一个失去理想。

LayUI资料整理

《LayUI资料整理》

数据存储

  • localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。
  • sessionStorage 会话性存储:layui.sessionData(table, settings),页面关闭后即失效。

公共方法

方法/属性 描述
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 回调函数

公共属性

属性 描述
lay-skin=" " 定义相同元素的不同风格,如checkbox的开关风格
lay-filter=" " 事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
lay-submit 定义一个触发表单提交的button,不用填写值

layui模块的定义

layui.define([mods], function(exports){

//……

exports('mod', api);
});

layui模块的使用

layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;

//……

});

第一步:编写扩展模块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 目录的子目录
});
//你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
})
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;

mymod.hello('World!'); //弹出 Hello World!
});

 

点赞

发表评论

电子邮件地址不会被公开。