全局配置

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

  

layui-学习01-基本api的更多相关文章

  1. Java学习01

    Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...

  2. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  3. Java虚拟机JVM学习01 流程概述

    Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...

  4. Android Testing学习01 介绍 测试测什么 测试的类型

    Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...

  5. ThinkPhp学习01

    原文:ThinkPhp学习01 一.ThinkPHP的介绍           MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板 ...

  6. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  7. JVM学习01:内存结构

    JVM学习01:内存结构 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...

  8. webservice学习01:wsdl文档结构

    webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...

  9. spring学习(01)之IOC

    spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...

  10. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

  1. esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx);

    esp_err_t esp_event_loop_init(system_event_cb_t cb, void *ctx){ if (s_event_init_flag) { return ESP_ ...

  2. Navigator 传值

    iOS 导航器 http://wiki.jikexueyuan.com/project/react-native/navigator-ios.html import React, { Componen ...

  3. java面向对象概念2

    一.理解“万事万物皆对象”. 1.在java语言范畴中,我们都将功能.结构等封装到类中,通过类的实例化,来调用具体的功能结构. 2.涉及到java语言与前端html.后端的数据库交互时,前后端的结构在 ...

  4. java操作html格式数据

    近期在做数据抓取功能,抓取到的数据为html格式,需在后台进行转换后取值,为了避免使用字符串查找方式获取而使用Jsonp完美实现. 1. 引入Jsonp: <dependency> < ...

  5. C#只启动一个进程的代码

    把写内容过程中经常用到的内容做个收藏,如下的内容是关于C#只启动一个进程的内容.public partial class App : Application { protected override ...

  6. C 和 C++ 字符串函数操作

    1)字符串操作  strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长 ...

  7. vue 路由传参 、接收参数

    传参组件 一. <router-link :to='"/main/course?navName=" +item.columnName + "&id=&quo ...

  8. CDH集群安装配置(三)- 集群时间同步(主节点)和 免密码登录

    集群时间同步(主节点) 1. 查看是否安装ntp服务,如果没有安装 rpm -qa |grep ntpd查看命令 yum install ntp安装命令 2. 修改配置 vi /etc/ntp.con ...

  9. 关于z-index问题

    关于z-inde,这个网址还是对我受益匪浅的,https://www.cnblogs.com/bigboyLin/p/4621335.html z-index 起作用得有一个前提: 就是和定位一起用, ...

  10. 转 OGG 部署阶段常见问题

    序号 问题 解决方案1 "2019-04-13 20:23:55 ERROR OGG-00868 Oracle GoldenGate Capture for Oracle, e_db1.pr ...