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-概念-入门-总结的更多相关文章

  1. 【转】kafka概念入门[一]

    转载的,原文:http://www.cnblogs.com/intsmaze/p/6386616.html ---------------------------------------------- ...

  2. [转帖]新手必读，16个概念入门 Kubernetes

    新手必读,16个概念入门 Kubernetes https://www.kubernetes.org.cn/5906.html 2019-09-29 22:13 中文社区 分类:Kubernetes教 ...

  3. Serverless 基本概念入门

    从行业趋势看,Serverless 是云计算必经的一场革命 2019 年,Serverless 被 Gartner 称为最有潜力的云计算技术发展方向,并被赋予是必然性的发展趋势.Serverless ...

  4. GraphQL 概念入门

    GraphQL 概念入门 Restful is Great! But GraphQL is Better. -- My Humble Opinion. GraphQL will do to REST ...

  5. Docker K8s基本概念入门

    原文地址:https://blog.csdn.net/TM6zNf87MDG7Bo/article/details/79621510 k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具 ...

  6. K8s基本概念入门

    序言 没等到风来,绵绵小雨,所以写个随笔,聊聊k8s的基本概念. k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部署,应用提供服务,扩容缩容应用,应用更新,都非 ...

  7. k8s概念入门

    k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部署,应用提供服务,扩容缩容应用,应用更新,都非常的方便,而且可以做到故障自愈,例如一个服务器挂了,可以自动将这个 ...

  8. MQTT 协议学习：000-有关概念入门

    背景 从本章开始,在没有特殊说明的情况下,文章中的MQTT版本均为 3.1.1. MQTT 协议是物联网中常见的协议之一,"轻量级物联网消息推送协议",MQTT同HTTP属于第七层 ...

  9. Kafka概念入门（一）

    序:如何保证kafka全局消息有序? 比如,有100条有序数据,生产者发送到kafka集群,kafka的分片有4个,可能的情况就是一个分片保存0-25,一个保存25-50......这样消息在kafk ...

  10. 《Java从入门到放弃》JavaSE入门篇：面向对象概念(入门版)

    要知道什么是面向对象,你首先要有个对象吧,所以······没有对象的可以回家洗洗睡了· 好吧,前面是开玩笑,要说明什么是面向对象,我们还是先 例子: 小呆:"小傻,你今天早餐吃的什么?&qu ...

随机推荐

  1. Java众神之路（3）-关键字（上）

    关键字(上) 1.final ① 对于基本类型前加以final修饰,表示被修饰的变量为常数,不可以修改.一个既是static又是final的字段表示只占据一段不能改变的存储空间. ② final用于对 ...

  2. mongodb使用1

    首先官网下载mongodb放在根目录下.新建db文件夹,在命令行中进入bin路径,然后运行mongod开启命令,同时用--dbpath指定数据存放地点为“db”文件夹 mongod --dbpath= ...

  3. [vuex] vuex requires a Promise polyfill in this browser报错问题的解决办法

    在IE下由于不支持promise而导致的问题,需要插件babel-prolyfill cnpm i bablel-prolyfill -D 接着在webpack.config.js当中进行配置 ent ...

  4. 【01】react 之 hello world

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...

  5. MacPro 系统空间竟占90G，如何清理--OmniDiskSweeper

    MacPro 经常提示我磁盘空间已满,管理磁盘空间. 然后我就管理了一下,发现系统竟占90个G,有点懵逼.然后网上查了资料,发现这个超级好用的工具OmniDiskSweeper. 打开是这样的! 然后 ...

  6. Accelerating Enum-Based Dictionaries with Generic EnumComparer

    原文发布时间为:2011-03-03 -- 来源于本人的百度文章 [由搬家工具导入] 文章：http://www.codeproject.com/KB/cs/EnumComparer.aspx 源码： ...

  7. 不用框架使用ajax 纯js使用ajax post，get范例及其区别

    原文发布时间为:2009-11-15 -- 来源于本人的百度文章 [由搬家工具导入] 不用框架使用ajax 纯js使用ajax post，get范例及其区别 ===================== ...

  8. hdu 2732 Leapin' Lizards 最大流 拆点 建图

    题目链接 题意 给定一张网格,格子中有些地方有柱子,有些柱子上面有蜥蜴. 每个柱子只能承受有限只蜥蜴从上面经过.每只蜥蜴每次能走到相距曼哈顿距离\(\leq k\)的格子中去. 问有多少只蜥蜴能走出网 ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---54

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. Spring Boot学习——Spring Boot简介

    最近工作中需要使用到Spring Boot,但是以前工作中没有用到过Spring Boot,所以需要学习下Spring Boot.本系列笔记是笔者学习Spring Boot的笔记,有错误和不足之处,请 ...