打开官网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. 阿里面试官：小伙子，给我说一下Spring 和 Spring Boot 的区别吧

    前言 对于 Spring和 SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,相信对 ...

  2. 回收站都找不到的文件，EasyRecovery帮你找

    "有人相爱,有人看海,有人深夜两点还在找文件."没错,有人正是不才本人. 细数下来,这已经是本人第五六七八次丢文件了,每次丢的原因很奇怪:删错了.保存完找不到了.或者没有原因就那样 ...

  3. C++分支结构,求一元二次方程的根

    总时间限制:  1000ms 内存限制:  65536kB 描述 利用公式x1 = (-b + sqrt(b*b-4*a*c))/(2*a), x2 = (-b - sqrt(b*b-4*a*c))/ ...

  4. zk特性

    看了又忘系列: 1.zk会将全量的数据存储在内存中,以此来实现提高服务器吞吐,减少延迟的目的. 2.集群中每台机器都会在内存中维护当前的服务器状态,并且每台机器之间都相互保持着通信.只要集群中存在超过 ...

  5. 网骗欺诈？网络裸奔？都是因为 HTTP？

    先跟大家讲个故事,我初恋是在初中时谈的,我的后桌的后桌.那个时候没有手机这类的沟通工具,上课交流有三宝,脚踢屁股.笔戳后背以及传纸条,当然我只能是那个屁股和后背,还不是能让初恋踢到的后背. 但是说实话 ...

  6. WireShark抓包分析以及对TCP/IP三次握手与四次挥手的分析

    WireShark抓包分析TCP/IP三次握手与四次挥手 Wireshark介绍: Wireshark(前称Ethereal)是一个网络封包分析软件.功能十分强大,是一个可以在多个操作系统平台上的开源 ...

  7. 总结一下 php连接oracle，完全可用。

    大致有两种方法 第一种 开启php_pdo_oci扩展,一般集成环境都会有这个扩展. 这个东西还是比较简单的,去官网查看吧 http://php.net/manual/zh/book.pdo.php ...

  8. kafka监听出现的问题,解决和剖析

    问题如下: kafka为什么监听不到数据 kafka为什么会有重复数据发送 kafka数据重复如何解决 为什么kafka会出现俩个消费端都可以消费问题 kafka监听配置文件 一. 解决问题一(kaf ...

  9. Spring Boot 实现看门狗功能 (调用 Shell 脚本)

    需要实现看门狗功能,定时检测另外一个程序是否在运行,使用 crontab 仅可以实现检测程序是否正在运行,无法做到扩展,如:手动重启.程序升级(如果只需要实现自动升级功能可以使用 inotify)等功 ...

  10. this大全,还有谁??????!!!!!!!

    this在函数调用时创建,一般的对象没有this,全局window可以理解为一个函数,他有一个全局this JavaScript 语言之所以有this的设计,跟内存里面的数据结构有关系. 函数里thi ...