打开官网https://www.layui.com/下载这个框架

官网首页 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下

  ├─css //css目录

  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）

  │  │  ├─laydate

  │  │  ├─layer

  │  │  └─layim

  │  └─layui.css //核心样式文件

  ├─font  //字体图标目录

  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）

  │─lay //模块核心目录

  │  └─modules //各模块组件

  │─layui.js //基础核心库

  └─layui.all.js //包含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="../layui/css/layui.css">

</head>

<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.js"></script>

<script>

//一般直接写在一个js文件中

layui.use(['layer', 'form'], function(){

  var layer = layui.layer

  ,form = layui.form;

  layer.msg('Hello World');

});

</script>

</body>

</html>
<!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="../layui/css/layui.css">

</head>

<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.all.js"></script>

<script>

//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：

;!function(){

  var layer = layui.layer

  ,form = layui.form;

  layer.msg('Hello World');

}();

</script>

</body>

</html>

　　这两个代码主要是导入的js文件不一样。一个是layui.js跟layui.all.js，主要的区别是：

layui.all.js： 采用非模块化方式  非模块化不用每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.all.js

layui.js： 自动加载    模块化必须每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.js（推荐用这种，但是就是前面写起来麻烦）

layui的基本使用的更多相关文章

  1. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  2. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  3. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  5. 关于layui

    之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.

  6. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  7. 使用的组件：Layui

    Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又 ...

  8. 【开源项目SugarSite】ASP.NET MVC+ Layui+ SqlSugar+RestSharp项目讲解

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  9. 前端框架layui

    可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可, ...

  10. Layui - 示例

    示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> & ...

随机推荐

  1. 深度分析：Java虚拟机类加载机制、过程与类加载器

    虚拟机类加载机制是把描述类的数据从 Class 文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的 Java 类型. ​ 需要注意的是 Java 语言与其他编译时需要进 ...

  2. mongodb查询前10条

    mongo可以通过时间或者通过id来判断上一条记录或者下一条记录,我是通过id 前10条 db.数据库名称.find({ '_id': { '$lt': ids } }).sort({_id: -1} ...

  3. day008|python之函数

    函数 目录 函数 1 Type hinting 2 函数参数 2.1 概述 2.2 参数详解 2.3 参数的使用 2.4 可变长函数-->*与**的应用 2.6 命名关键字形参 3 函数对象 3 ...

  4. nginx + lua-nginx-module 编译

    摘要:本文主要介绍如何将lua-nginx-module 编译到nginx主程序中. nginx是一个高性能的反向代理服务器,lua是一个小巧的脚本语言,利用lua-nginx-module模块可以使 ...

  5. 2014.04.28基于CPLD的LCOS场序彩色视频控制器设计

    基于CPLD的LCOS场序彩色视频控制器设计 作者:宋丹娜,代永平,刘艳艳,商广辉 发表刊物:液晶与显示,2009 学习时间:2014.04.28 文章讲述了-- (和上一篇论文有些相似之处) 1. ...

  6. 使用KVM的API编写一个简易的AArch64虚拟机

    参考资料: Linux虚拟化KVM-Qemu分析(一) Linux虚拟化KVM-Qemu分析(二)之ARMv8虚拟化 Linux虚拟化KVM-Qemu分析(三)之KVM源码(1) Linux虚拟化KV ...

  7. 《技术男征服美女HR》—Fiber、Coroutine和多线程那些事

    1.起点 我叫小白,坐在这间属于华夏国超一流互联网公司企鹅巴巴的小会议室里,等着技术面试官的到来. 令我感到不舒服的,是坐在我对面的那位HR美女一个劲儿的盯着我打量!虽说本人帅气,但是也不能这么毫无顾 ...

  8. 莫比乌斯反演进阶-洛谷P2257/HDU5663

    学了莫比乌斯反演之后对初阶问题没有任何问题了,除法分块也码到飞起,但是稍微变形我就跪了.用瞪眼观察法观察别人题解观察到主要内容除了柿子变形之外,主要就是对于miu函数的操作求前缀和.进而了解miu函数 ...

  9. PyQt(Python+Qt)学习随笔：Qt Designer中部件的geometry几何属性

    geometry属性保存部件相对于其父级对象的位置和大小,Qt实际上是以一个长方形来表示部件的位置和大小的,包括左上角的坐标位置.长度和宽带. 当部件的geometry调整时,部件如果可见将立即接收m ...

  10. 代码审计【根据功能点定向审计】BugFree ZSWin重装案例

    (哦对了!这些CMS代码不要安装在服务器上,先不说它们用来代码审计本身就是有漏洞的,而且在网上下载下来,也不能保证没有源码是否被篡改而留有后门,就安装在本地进行代码审计的练习即可) 我们先下载BugF ...