layui-概念-入门-总结
layui教程:http://www.dosrun.com/layui/
获得 Layui
你可以在官网首页下载到 Layui 的最新版,也可以通过 GitHub得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目,推荐你直接从官网下载。layui构建后的结构(也就是你获得的包)
├─css //css目录
│ └─modules //模块css目录(一般如果模块相对较大,我们会单独提取)
│ ├─laydate
│ ├─layer
│ │ └─default
│ └─layim
│ └─skin
├─font //字体图标目录
├─images //图片资源目录(一些表情等)
│ └─face
└─lay //JS目录
│ ├─dest //经过合并的完整模块
│ └─modules //各模块/组件
└─layui.js
快速上手
获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
./layui/css/layui.css
./layui/layui.js
没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用Layui</title>
<link rel="stylesheet" href="build/css/layui.css">
</head>
<!-- 你的HTML代码 -->
<script src="build/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form(); layer.msg('Hello World'); }); </script>
</body>
</html>
规范化的用法(推荐)
如果你想快速使用Layui的组件,你还是跟平时一样script标签引入你的js文件,然后在你的js文件中使用layui的组件。但我们更推荐你遵循Layui的模块规范,建立一个自己的模块作为入口:
<script>
layui.config({
base: '/res/js/modules/' //你的模块目录
}).use('index'); //加载入口
</script>
上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:
<script>
/**
项目JS主入口
以依赖Layui的layer和form模块为例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form(); layer.msg('Hello World'); exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致
});
</script>
简单粗暴用法
如果你觉得Layui的模块化还是有点啰嗦,木有关系的亲。Layui考虑到了像你一样的猿群,我们将layui.js及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式,你无需再通过layui.use加载模块,直接使用即可,如:
<script src="../layui/lay/dest/layui.all.js"></script>
<script>
;!function(){
//当使用了 layui.all.js,无需再执行layui.use()方法
var from = layui.form()
,layer = layui.layer; //…
}();
</script>
但你必须知道,这种使用方式,意味着Layui的模块化已经失去了它的意义。但不可否认,它比什么都来的简单。
好了,不管你采用什么样的方式,从现在开始,尽情地使用Layui吧!
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
layui是一个前端框架。layui.layer-是其下的一个弹层组件 :参考http://www.dosrun.com/layui/ 首页介绍-概念(分类)!
更多关于layui.layer-弹出层组件内容参见:http://www.cnblogs.com/xiangru0921/p/6728768.html
更多layui组件内容参见:http://www.dosrun.com/layui/
=========================================================================
更多内容参见:http://www.dosrun.com/layui/layui-intro.html
layui-概念-入门-总结的更多相关文章
- 【转】kafka概念入门[一]
转载的,原文:http://www.cnblogs.com/intsmaze/p/6386616.html ---------------------------------------------- ...
- [转帖]新手必读,16个概念入门 Kubernetes
新手必读,16个概念入门 Kubernetes https://www.kubernetes.org.cn/5906.html 2019-09-29 22:13 中文社区 分类:Kubernetes教 ...
- Serverless 基本概念入门
从行业趋势看,Serverless 是云计算必经的一场革命 2019 年,Serverless 被 Gartner 称为最有潜力的云计算技术发展方向,并被赋予是必然性的发展趋势.Serverless ...
- GraphQL 概念入门
GraphQL 概念入门 Restful is Great! But GraphQL is Better. -- My Humble Opinion. GraphQL will do to REST ...
- Docker K8s基本概念入门
原文地址:https://blog.csdn.net/TM6zNf87MDG7Bo/article/details/79621510 k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具 ...
- K8s基本概念入门
序言 没等到风来,绵绵小雨,所以写个随笔,聊聊k8s的基本概念. k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部署,应用提供服务,扩容缩容应用,应用更新,都非 ...
- k8s概念入门
k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部署,应用提供服务,扩容缩容应用,应用更新,都非常的方便,而且可以做到故障自愈,例如一个服务器挂了,可以自动将这个 ...
- MQTT 协议学习:000-有关概念入门
背景 从本章开始,在没有特殊说明的情况下,文章中的MQTT版本均为 3.1.1. MQTT 协议是物联网中常见的协议之一,"轻量级物联网消息推送协议",MQTT同HTTP属于第七层 ...
- Kafka概念入门(一)
序:如何保证kafka全局消息有序? 比如,有100条有序数据,生产者发送到kafka集群,kafka的分片有4个,可能的情况就是一个分片保存0-25,一个保存25-50......这样消息在kafk ...
- 《Java从入门到放弃》JavaSE入门篇:面向对象概念(入门版)
要知道什么是面向对象,你首先要有个对象吧,所以······没有对象的可以回家洗洗睡了· 好吧,前面是开玩笑,要说明什么是面向对象,我们还是先 例子: 小呆:"小傻,你今天早餐吃的什么?&qu ...
随机推荐
- Teleportation(tel)
Teleportation(tel) 题目描述 Zy大帝拥有n个星球,因为距离非常遥远,所以Zy在他所居住的1号星球和他的军事基地霸中所在的2号星球建造了两个传送门,这样从1号星球到2号星球就只需要2 ...
- 【VBA】利用Range声明Array(一维/二维)
[说明] B2开始到B?(中间不能有空格),定义一维数组Arr_approver() Dim R_sh As Worksheet Set R_sh = ThisWorkbook.Sheets(&quo ...
- Linux SCRT本地免秘钥登录远程机器
一.生成本地公钥和私钥 1.1.创建公钥 步骤:工具->创建公钥 然后下一步: 秘钥类型选择RSA: 然后下一步: 密钥位长度:默认是1024,我这边是2048 然后下一步: 密钥格式: 然后点 ...
- 洛谷P2114起床困难综合征
从高位到低位按位枚举,贪心.如果该位填1比填0结果优且填1不会超出m限制,那就填1,否则填0 /*by SilverN*/ #include<iostream> #include<c ...
- git ssh 生成步骤
Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...
- 关于eclipse总是出现adb refused request的问题(转)
1.检查下是不是开启了手机助手之类2.打开进程管理器,结束所有的adb.exe 3.关闭所有的杀毒软件之类的东东4.检查USB连接线,USB口,把USB线连在电脑主机后面的USB口5.重启eclips ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---30
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- 迷宫问题(DFS,BFS)
/******************************** 啊哈!算法 深度优先搜索算法 迷宫问题 输入: 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 ...
- Codeforces 583 DIV2 Asphalting Roads 模拟
原题链接:http://codeforces.com/problemset/problem/583/A 题意: 很迷很迷,表示没看懂..但是你看样例就秒懂了 题解: 照着样例模拟就好 代码: #inc ...
- [读书笔记] JavaScript设计模式: 单例模式
单例模式:保证一个类只有一个实例,并提供一个可以访问它的全局访问点. 一种简单.方便的写法就是用一个变量来标识当前类是否已经创建过对象,如果有,则返回已经创建好的对象,否则创建一个新对象,并将其返回. ...