打开官网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中如何如理异常，一篇帮你搞定！

    异常的背景 初识异常 我们曾经的代码中已经接触了一些 "异常" 了. 例如: 除以 0 System.out.println(10 / 0); // 执行结果 Exception ...

  2. 凭借着这份Spring面试题，我拿到了阿里，字节跳动美团的offer！

      一般问题 1.1. 不同版本的 Spring Framework 有哪些主要功能?   1.2. 什么是 Spring Framework? Spring 是一个开源应用框架,旨在降低应用程序开发 ...

  3. 如何修改IDM下载器的临时文件夹位置

    所有的应用程序在下载时,都会有一些默认的选项.比如产生的临时文件存放在C盘目录下,或者定期自动更新等设置.那么当我们的计算机上安装了很多程序之后,C盘的空间就会渐渐地变小了,从而有了空间不足等等情况, ...

  4. FL Studio中如何进行工具栏编辑

    菜单工具栏是我们使用FL Studio时经常需要使用的一个功能,那么,除了软件默认的菜单工具栏,我们应该如何编辑菜单工具栏呢? 图1:工具栏编辑 想要编辑更改默认菜单栏,我们只需要鼠标右键单击菜单工具 ...

  5. CorelDRAW常用工具之手绘工具

    对于平面设计师来说,一个好用顺手的手绘工具是必不可少的,CorelDRAW的手绘工具能将手绘笔触转换成平滑的线条或者形状. 1.基础操作 CorelDRAW的手绘工具组包含手绘.2点线.贝塞尔.钢笔. ...

  6. 巧妙使用MathType快速编写数学函数公式

    在我们日常的工作与学习中,你是否也会遇到过无法在电脑中编写数学函数公式的情况呢? 简单的数学函数公式或许经过我们不懈的努力也可以成功的编写,不过这会耽误我们大把的时间. 想象一下,假如你的老板急着催你 ...

  7. 为什么换了电脑安装MindManager提示密钥失效？

    相信很多MindManager用户遇到过这样的问题,不想在原电脑上使用MindManager思维导图软件,想要换电脑安装,但是提示该许可证密钥失效了.下面文章就教大家如何解决这个问题: 我们在Mind ...

  8. 如何用EasyRecovery恢复U盘乱码的文件

    大多数用户在遇到U盘文件乱码的情况时,都显得有点手足无措,甚至会删除乱码文件,这样就导致了乱码文件数据的丢失.针对这种情况,我们应该怎么正确处理呢? 图1:U盘乱码 U盘文件乱码原因: 想要解决问题, ...

  9. centos 7 安装zabbix-4.0

    第一步:安装nginx ############安装Nginx###########yum localinstall http://nginx.org/packages/centos/7/noarch ...

  10. sublime text3配置javascript运行环境

    步骤一 安装node.js 官网下载链接:node.js 步骤二 Sublime 依次点击 菜单栏 Tools => Build System => New Build System 步骤 ...