layui-学习01-基本api
全局配置
layui.config({ dir: '/res/layui/', //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视 version: false, //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610 debug: false, //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面 base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展 });
定义模块
加载模块
动态加载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的更多相关文章
- Java学习01
Java学习01 第一章 1.JRE与JDK JDK(JAVA Develop Kit,JAVA开发工具包)提供了Java的开发环境和运行环境,主要用于开发JAVA程序,面向Java程序的开发者; J ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- Java虚拟机JVM学习01 流程概述
Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...
- Android Testing学习01 介绍 测试测什么 测试的类型
Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...
- ThinkPhp学习01
原文:ThinkPhp学习01 一.ThinkPHP的介绍 MVC M - Model 模型 工作:负责数据的操作 V - View 视图(模板 ...
- 【iScroll源码学习01】准备阶段 - 叶小钗
[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文 http://www.cnblogs.com/yexiaochai/p/3 ...
- JVM学习01:内存结构
JVM学习01:内存结构 写在前面:本系列分享主要参考资料是 周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...
- webservice学习01:wsdl文档结构
webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...
- spring学习(01)之IOC
spring学习(01)之IOC IOC:控制反转——Spring通过一种称作控制反转(IOC)的技术促进了低耦合.当应用了IOC,一个对象依赖的其它对象会通过被动的方式传递进来,而不是这个对象自己创 ...
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
随机推荐
- 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_ ...
- Navigator 传值
iOS 导航器 http://wiki.jikexueyuan.com/project/react-native/navigator-ios.html import React, { Componen ...
- java面向对象概念2
一.理解“万事万物皆对象”. 1.在java语言范畴中,我们都将功能.结构等封装到类中,通过类的实例化,来调用具体的功能结构. 2.涉及到java语言与前端html.后端的数据库交互时,前后端的结构在 ...
- java操作html格式数据
近期在做数据抓取功能,抓取到的数据为html格式,需在后台进行转换后取值,为了避免使用字符串查找方式获取而使用Jsonp完美实现. 1. 引入Jsonp: <dependency> < ...
- C#只启动一个进程的代码
把写内容过程中经常用到的内容做个收藏,如下的内容是关于C#只启动一个进程的内容.public partial class App : Application { protected override ...
- C 和 C++ 字符串函数操作
1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长 ...
- vue 路由传参 、接收参数
传参组件 一. <router-link :to='"/main/course?navName=" +item.columnName + "&id=&quo ...
- CDH集群安装配置(三)- 集群时间同步(主节点)和 免密码登录
集群时间同步(主节点) 1. 查看是否安装ntp服务,如果没有安装 rpm -qa |grep ntpd查看命令 yum install ntp安装命令 2. 修改配置 vi /etc/ntp.con ...
- 关于z-index问题
关于z-inde,这个网址还是对我受益匪浅的,https://www.cnblogs.com/bigboyLin/p/4621335.html z-index 起作用得有一个前提: 就是和定位一起用, ...
- 转 OGG 部署阶段常见问题
序号 问题 解决方案1 "2019-04-13 20:23:55 ERROR OGG-00868 Oracle GoldenGate Capture for Oracle, e_db1.pr ...