layui 的基本使用介绍
全局配置
layui.config({
dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
});
定义模块
方法:layui.define([mods], callback)
layui.define(function(exports){
//do something
exports('demo', function(){
alert('Hello World!');
});
});
加载所需模块
layui.use(['laypage', 'layedit'], function(){
var laypage = layui.laypage
,layedit = layui.layedit
//do something
});
layui.use(['laypage', 'layedit'], function(laypage, layedit){
//使用分页
laypage();
//建立编辑器
layedit.build();
});
动态加载CSS
layui.link(href)
本地存储
本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。
- localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。
- sessionStorage 会话性存储:layui.sessionData(table, settings),页面关闭后即失效。注:layui 2.2.5 新增
获取设备信息
layui.device(key)
其它
方法 | 属性 描述 |
---|---|
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 回调函数 |
模块命名空间
layui 的模块接口会绑定在 layui 对象下,内部由 layui.define() 方法来完成。每一个模块都会一个特有的名字,并且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui.{模块名}。调用模块可通过 layui.use 方法来实现,然后再通过 layui 对象获得模块接口。
如何使用内部jQuery
//主动加载jquery模块
layui.use(['jquery', 'layer'], function(){
var $ = layui.$ //重点处
,layer = layui.layer;
//后面就跟你平时使用jQuery一样
$('body').append('hello jquery');
});
layui官方文档
layui 的基本使用介绍的更多相关文章
- layui框架部分功能介绍
注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...
- layui-table与layui-rate评分转换成星级的使用
需求:将layui-table中的某一列,例如:评分,从数据库中查找出来之后,进行layui-rate评分转换显示效果,为星星.显示效果如下: 实现代码: 1.layui中引入rate 2.table ...
- layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍
方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...
- 模板引擎文档 - layui.laytpl 介绍
<!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset=&qu ...
- layui navTree 动态渲染菜单组件介绍
navTree.js 简介 extends/navTree.js 是一个基于 layui 扩展的模块化组件,用于构建后台布局系统中的垂直导航菜单与水平导航菜单. extends/navTree.js ...
- 开源网站.NETMVC+ Layui+SqlSugar+RestSharp
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...
- 前端框架layui
可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...
随机推荐
- 4.利用GoogleProtoBuffer实现RPC
- 利用Python爬取疫情数据并使用可视化工具展示
import requests, json from pyecharts.charts import Map, Page, Pie, Bar from pyecharts import options ...
- vscode链接git拉取项目
vscode终端中就可操作 初始化 git init 链接 git git remote add origin http://**************.git 拉取项目 git clone ht ...
- 怎么摆脱又臭又长的 Git 命令?
在使用 Git 的时候,虽然大部分时候我们用的是图形客户端,但图形客户端不能解决所有的操作,所以,也少不了要需要使用命令行的时候. 但有些 Git 命令和参数确实又不好记,甚至有的命令每次要用的时候需 ...
- 软件定义网络实验记录②--Mininet 实验——拓扑的命令脚本生成
一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二.实验任务 通过使用命令行创建.Python 脚本编写生成拓扑,熟悉 Mininet 的基本功能. 三. ...
- 软件定义网络实验记录①--Mininet 源码安装和可视化拓扑工具
第一步: 在 Ubuntu 系统的 home 目录下创建一个目录,目录名为自己的标识,包括但 不限于学号.姓名拼音等,目录不要包含中文. 第二步: 在创建的目录下,完成 Mininet 的源码安装. ...
- C# Redis分布式锁(RedLock) - 多节点
Redis单节点的分布式锁只需要注意三点就可以了: 1.加锁并设置锁的过期时间必须是原子操作; 2.锁的value值必须要有唯一性; 3.释放锁的时候要验证其value值,不是自己加的锁不能释放. 但 ...
- C++对话框创建及修改对话框属性
转载:http://www.51testing.com/html/48/n-3151648.html 创建对话框 C++中对话框分为模式对话框和非模式对话框. 模式对话框的创建: MyDialog m ...
- C1853 编译器错误:fatal error C1853: 'pjtname.pch' precompiled header file is from a previous
转载:https://www.cnblogs.com/emanlee/archive/2010/10/16/1852998.html 用VC++ 2008 编写C语言程序,编译出现错误: 预编译头文件 ...
- spring-boot-route(十一)数据库配置信息加密
Spring Boot最大的特点就是自动配置了,大大的减少了传统Spring框架的繁琐配置,通过几行简单的配置就可以完成其他组件的接入.比如你想要连接mysql数据库,只需要的配置文件里面加入mysq ...