Layui的基本使用

172 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天,点击查看活动详情

 Layui是一款上手容易的风格简约的WebUI,掌握Layui的底层方法就基本可以使用Layui了:

底层方法

 使用模块之前可以使用layui.config(options)来配置全局的参数,其中dir表示layui.js所在的目录,base设定扩招的layui模块所在的目录,如果设置version为true的话可以让浏览器取消模块缓存,。

 通过layui.define([mods],callback)方法可以定义模块,mods参数表示该模块所依赖的模块,比如很常见的layer、laypage等都是layui的内置模块,同样这个参数可以是自定义的模块callback是回调函数。

 加载模块是使用layui.use([mods],callback),mods表示所引用的模块,如果这个参数不写的话默认引用所有内置模块,要想使用这些模块,还需要在回调函数中声明一个变量来接收它。callback函数会在模块加载完后执行。

 动态加载CSS使用的是layui.link(href)。

 有时候需要在本地存储一些数据,这时可以使用localStorage和sessionStorage对象,其中使用localStorage存储的数据在删除前不会自动释放,而sessionStorage保存的数据在当前页面关闭后就释放。如果需要获取浏览器的一些信息可以使用layui.device(key)函数,可以拿到浏览器的底层操作系统、浏览器是什么版本、以及是否是Android或者ios系统。

自定义配置

layui.config({
    base:
    version:
}).extend({
    自定义的模块名:自定义扩展所在目录
})

 除此之外还有一些常用的方法,比如layui.each(obj,fn)这个方法可以遍历数组或者DOM对象;layui.hint(),用来在控制台打印输出异常信息。layui也可以配合一些jquery的方法来使用,例如将一组数据转化成JSON格式的数据。

$.getJSON(options, function (data) {

}