js插件---layer.js使用体验是怎样
js插件---layer.js使用体验是怎样
一、总结
一句话总结：只有jquery和js，没有css，使用各种弹出层掉用各种函数特别方便，特别简单，特别好用。
引入只需要引入这两个，css都不需要，真方便（手机端用的话好像有自己的js和css）
6 <script src="layer/jquery.min.js"></script>
7 <script src="layer/layer.js"></script>
比如下面的弹出一个提示层
20 //弹出一个提示层
21 $('#test1').on('click', function(){
22 layer.msg('hello');
23 });
二、最简单使用代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
6 <script src="layer/jquery.min.js"></script>
7 <script src="layer/layer.js"></script>
</head>
<body> <div id="test1">弹出一个提示层</div>
<div id="test2">弹出一个页面层</div>
<div id="parentIframe">弹出一个iframe层</div>
<div id="test4">弹出一个loading层</div>
<div id="test5">弹出一个tips层</div> </body>
<script>
//弹出一个提示层
$('#test1').on('click', function(){
layer.msg('hello');
});
//弹出一个页面层
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '\<\div style="padding:20px;">自定义内容\<\/div>'
});
});
//弹出一个iframe层
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['800px' , '520px'],
content: 'test/iframe.html'
});
});
//弹出一个loading层
$('#test4').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 1000);
});
//弹出一个tips层
$('#test5').on('click', function(){
layer.tips('向上的', '#test5', {
tips: 1
});
});
</script>
</html>
js插件---layer.js使用体验是怎样的更多相关文章
- js插件---bootstrap-datepicker.js是什么
js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...
- js插件---video.js如何使用
js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...
- 推荐vue.js、layer.js、axios.js
都是很简单又很实用的东西. vue.js,前端双向绑定框架. layer.js,前端遮罩层框架.(layui的一部分,可单独使用) axios.js,异步请求框架,用起来比jQuery的ajax舒服一 ...
- 可操纵网页URL地址的js插件-url.js
url.js是一款能够很有用方便的操纵网页URL地址的js插件.通过url.js你能够设置和获取当前URL的參数,也能够对当前URL的參数进行更新.删除操作.还能够将当前URL的參数显示为json字符 ...
- 一款给力的一键复制js插件-clipboard.js
一款没有依赖的.给力的一键复制的JS插件 点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...
- 解决IE6下PNG透明的JS插件:DD_belatedPNG.js
DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte ...
- 在线阅读PDF文件js插件——pdf.js
最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能. 首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobje ...
- 最牛的打字效果JS插件 typing.js
最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...
- JS 插件 fastclick.js 解决手机端click点击延迟
FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...
随机推荐
- Python开源爬虫项目代码：抓取淘宝、京东、QQ、知网数据--转
数据来源:数据挖掘入门与实战 公众号: datadw scrapy_jingdong[9]- 京东爬虫.基于scrapy的京东网站爬虫,保存格式为csv.[9]: https://github.co ...
- PostgreSQL Replication之第七章 理解Linux高可用（5）
7.5 高可用性是所有冗余 让我们从一个不同的角度看一下前面的混合超市的例子.为了处理大量顾客无需长排队,无需关闭超市,混合超市雇用更多的出纳员以及安装许多(甚至更多)的收银机. 这样,如果一个收银机 ...
- Linux Shell脚本编程-函数
函数介绍 定义:把一段独立功能的的代码当做一个整体,并为之一个名字,命名的代码段,此即为函数: 功能:函数function是由若干条shell命令组成的语句块,实现代码重用和模块化编程. 注意: ...
- iotop---监控磁盘I/O 使用状况
iotop命令是一个用来监视磁盘I/O使用状况的top类工具.iotop具有与top相似的UI,其中包括PID.用户.I/O.进程等相关信息.Linux下的IO统计工具如iostat,nmon等大多数 ...
- P2633 Count on a tree(主席树)
题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...
- 【UVa 116】Unidirectional TSP
[Link]:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...
- PatentTips - Managing sequenced lock requests
BACKGROUND In a multi-threaded processing environment, two or more threads may require access to a c ...
- javaEE之-------统计站点刷新量
每一个站点都有自己的统计訪问量,可是少不了server会出现意外情况,(如断电..) 所以就须要我们在站点挂机的前段时间将这个数据存起来. 我们就须要用到站点最大的容器,application,我们採 ...
- Kinect for Windows V2 SDK+ VS2012 环境搭建
眼下使用的SDK版本号是KinectSDK-v2.0-PublicPreview1409-Setup.exe. 下载地址:http://www.microsoft.com/en-us/download ...
- Java 实现状态(State)模式
/** * @author stone */ public class WindowState { private String stateValue; public WindowState(Stri ...