Layer从入门到精通-01, 你好 layer!

第一个问题:layer是什么?

Layer是一款可以独立使用的、依赖于jauery的弹出层插件!

当然layer也可以作为layui的一个模块,但我们所使用的案例,均使用独立的layer插件来完成!

第二个问题:在哪儿下载?

Layer独立插件的官网是:http://layer.layui.com

Layer插件的手册网址是:https://www.layui.com/doc/modules/layer.html

个问题:我们究竟下载了什么东西

在这里,我们下载的是layer-v3.0.3.zip压缩包!

解压之后的layer-v3.0.3目录结构是:

其中我们用到的只有layer文件夹及其子文件!

说明:需要说明的是layer目录下面的目录结构请不要随意改动,尽量保持原目录结构!

主目录layer的目录结构是:

其中layer.js就是我们要引入的js文件,其余的文件不需要我们管。

个问题:如何使用

1,准备工作

(1, 搭建工作目录!

a, 在桌面或者硬盘任意位置新建文件夹demo;

b, 在demo目录下新建三个文件夹:

Js                                  //存放所有的javascript文件

Css                                //存放所有的css文件

Images                           //存放所有的图片文件

(2, 准备插件文件!

a, 将layer目录复制到demo/js目录下面

b, 下载jauery2.1.4.js放到demo/js目录下面

最终形成的目录结构是:

2, 使用layer编写第一个弹框!

(1, 在demo文件夹下新建文件 index.html;

(2, 在index.html中引入jquery2.1.4.js文件;

(3, 在index.html中引入layer.js文件;

(4, 使用layer的内置msg方法制作第一个简单的弹层信息框!

最终编写好的index.html文件:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<!--(2, 在index.html中引入jquery2.1.4.js文件;-->

<script src="./js/jquery2.1.4.js"></script>

<!--(3, 在index.html中引入layer.js文件;-->

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

</head>

<body>

<script type="text/javascript">

//(4, 使用layer的内置msg方法制作第一个简单的弹层信息框!

layer.msg("你好, layer");

</script>

</body>

</html>

最终运行效果:

最后总结:

1, layer是依赖于jquery的,一定要在jquery之后引入!

2, layer的整体结构尽量不要改动!

3, layer的使用很简单!

本案例代码地址:http://pan.baidu.com/s/1o84pfq6 密码: brqq

时间: 2024-10-10 23:04:01

Layer从入门到精通-01, 你好 layer!的相关文章

Git从入门到精通01

一.git到底是什么,有什么作用? 1.根据百度百科的解释,Git(读音为/g?t/)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.说白了就是一个免费软件,当多人开发一个项目时公共资源,用于管理代码的工具. 2.版本控制器除git外还有cvs和svn,早期cvs用的比较多,06年时svn开始崛起,10年左右git应用开始广泛.还有一个github需要提一下,是一个开源的项目的托管平台,只支持git 作为唯一的版本库格式进行托管,故名gitHub. 3.git支

oracle从入门到精通复习笔记续集之PL/SQL(轻量版)

复习内容: PL/SQL的基本语法.记录类型.流程控制.游标的使用. 异常处理机制.存储函数/存储过程.触发器. 为方便大家跟着我的笔记练习,为此提供数据库表文件给大家下载:点我下载 为了要有输出的结果,在写PL/SQL程序前都在先运行这一句:set serveroutput on结构:declare--声明变量.类型.游标begin--程序的执行部分(类似于java里的main()方法)exception--针对begin块中出现的异常,提供处理的机制--when...then...--whe

GPU 编程入门到精通(四)之 GPU 程序优化

博主因为工作其中的须要,開始学习 GPU 上面的编程,主要涉及到的是基于 GPU 的深度学习方面的知识,鉴于之前没有接触过 GPU 编程.因此在这里特地学习一下 GPU 上面的编程.有志同道合的小伙伴.欢迎一起交流和学习,我的邮箱: [email protected] . 使用的是自己的老古董笔记本上面的 Geforce 103m 显卡,尽管显卡相对于如今主流的系列已经很的弱.可是对于学习来说,还是能够用的.本系列博文也遵从由简单到复杂.记录自己学习的过程. 0. 文件夹 GPU 编程入门到精通

区块链技术从入门到精通

详情请交流  QQ  709639943 01.区块链技术从入门到精通 02.2017年新生大学区块链视频教程 03.Node.js入门到企业Web开发中的应用 04.精通高级RxJava 2响应式编程思想 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.快速上手Ionic3 多平台开发企业级问答社区 09.Java Spring Security开发安全的REST服务 10.深入Java虚拟机(JVM

nginx教程从入门到精通

[转]nginx教程从入门到精通 nginx教程写了一段时间,无意中发现,nginx相关文章已经达到了近100篇了.觉得很有必要汇总到一起,它是我们运维生存时间的一片心血,他是学习nginx的同学必看教程- -!,我们将会继续更新内容,不过内容难免有错误,希望大家指正. Nginx基础 1.  nginx安装 2.  nginx 编译参数详解 3.  nginx安装配置+清缓存模块安装 4.  nginx+PHP 5.5 5.  nginx配置虚拟主机 6.  nginx location配置

大数据系统学习零基础入门到精通加项目实战2017最新全套视频教程

38套大数据,云计算,架构,数据分析师,Hadoop,Spark,Storm,Kafka,人工智能,机器学习,深度学习,项目实战视频教程 视频课程包含: 38套大数据和人工智能精品高级课包含:大数据,云计算,架构,数据挖掘实战,实时推荐系统实战,电视收视率项目实战,实时流统计项目实战,离线电商分析项目实战,Spark大型项目实战用户分析,智能客户系统项目实战,Linux基础,Hadoop,Spark,Storm,Docker,Mapreduce,Kafka,Flume,OpenStack,Hiv

Spark2.0从入门到精通:Scala编程、大数据开发、上百个实战案例、内核源码深度剖析视频教程

38套大数据,云计算,架构,数据分析师,Hadoop,Spark,Storm,Kafka,人工智能,机器学习,深度学习,项目实战视频教程 视频课程包含: 38套大数据和人工智能精品高级课包含:大数据,云计算,架构,数据挖掘实战,实时推荐系统实战,电视收视率项目实战,实时流统计项目实战,离线电商分析项目实战,Spark大型项目实战用户分析,智能客户系统项目实战,Linux基础,Hadoop,Spark,Storm,Docker,Mapreduce,Kafka,Flume,OpenStack,Hiv

火云开发课堂 - 《Shader从入门到精通》系列 第一节:Shader介绍与工程搭建

<Shader从入门到精通>系列在线课程 第一节:Shader介绍与工程搭建 视频地址:http://edu.csdn.net/course/detail/1441/22665?auto_start=1 交流论坛:http://www.firestonegames.com/bbs/forum.php 工程下载地址:请成为正式学员获取工程 课程截图: 项目实例: 版权声明:本文为博主原创文章,未经博主允许不得转载.

SaltStack 入门到精通 - 第一篇: 安装SaltStack

实际环境的设定: 系统环境: centos6 或centos5 实验机器: 192.168.1.100 软件需求: salt 套件,及其需求环境 实验目的: 成功安装salt,并实现salt主从间通讯 特殊设置: 其它目的: 安装SaltStack(下面简称为salt) epel安装:salt安装需要epel源支持,所以在安装salt前需要先安装epel包 # centos5 下载下面rpm  wget -O    epel.rpm https://dl.fedoraproject.org/pu