博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui-学习01-基本api
阅读量:6902 次
发布时间:2019-06-27

本文共 2550 字,大约阅读时间需要 8 分钟。

全局配置

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!});

  

 

转载于:https://www.cnblogs.com/vs1435/p/7910274.html

你可能感兴趣的文章
MongoDB复制集
查看>>
oracle sql
查看>>
强制弹出页面代码(以及自动最小化功能)
查看>>
关于Centos7无法连接网络,安装tree命令及修改ONBOOT选项后退出的程序!
查看>>
VRRP单备份配置
查看>>
好程序员学习笔记:函数
查看>>
如何打造工业物联网帝国?
查看>>
Linux系统安全之grub密码和用户权限
查看>>
超人学院Hadoop大数据资源分享
查看>>
C# 压缩PDF图片
查看>>
mouseover事件mouseenter事件
查看>>
mysql 截取字符串
查看>>
static成员必须在类外初始化
查看>>
手机安全卫士-——Splash总结
查看>>
Greenplu数据库的部署
查看>>
C#调用Win32 的API函数--User32.dll
查看>>
第九章:Javascript类和模块
查看>>
2000W条数据的Oralce数据库SQL查询优化经验 - 机会总会留给有准备的人
查看>>
test
查看>>
为虚拟机中的debian6安装vmtool
查看>>