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 ...
随机推荐
- spring-data-redis 使用过程中需要注意的地方
1.序列化问题 <!-- SDR默认采用的序列化策略有两种,一种是String的序列化策略,一种是JDK的序列化策略. StringRedisTemplate默认采用的是String的序列化策略 ...
- 【DNN 系列】 添加模块后不显示
添加模块后不显示分为几个原因 1.检查.dnn文件是否填写正确,要和对应的页面文件对应上 我有一步是这这个名称地方我填上了 就不显示了.这里需要注意,VIEW 的名城是不需要写的 2.重写文件 实体操 ...
- numa 和 mysql
cpu numa结构反应的内存访问速度问题: 在多核cpu的时代引入了cpu的numa(非一致内存访问结构): NUMA引入了node的概念,每个物理CPU都被视作一个node,而每个node都有一个 ...
- bzoj1604 牛的邻居 STL
Description 了解奶牛们的人都知道,奶牛喜欢成群结队．观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个“群”．每只奶牛在吃草的时候有一个独一无二的位置坐标Xi,Yi(l ...
- js cookie 页面倒计时
疯了啦 写了一篇没有保存需求:页面倒计时 只从第一次加购开始公共方法cookie的设置 获取function getCookie(c_name){ if (document.cookie.length ...
- DF标志和串移动指令(movsb/movsw)
1.标志寄存器的第10位DF,方向标志位.在串处理指令中,控制每次操作后si,di的增减 DF=0,每次操作后,si.di添加 DF=1,每次操作后,si.di减小 我们能够用汇编语法描写叙述movs ...
- 剑指offer—java版本实现
终于完成了全部!所有的心累这时候都觉得很值得啊!爽! https://github.com/xurui1995/Sword-pointing-to-offer
- 用Linux建立多应用系统备份服务器
用Linux建立多应用系统备份服务器 本文旨在结合自己的工作实际,利用LinuxFTP服务器建立了一个多系统备份服务器异地备份策略. 1 建立LinuxFTP服务器 使用了Red Hat Enterp ...
- 利用 urandom 生成随机密码
cat /dev/urandom | LC_ALL=C tr -dc "[:alnum:]" | fold -w 16 |head -3 说明: fold -w 16 指定密 ...
- 打印机共享 ： 客户端 连接服务器打印机时提示"无法连接到打印机“
1.就是重启一下服务器端的Print Spooler服务就行了,这么简单! 2.修改打印机的共享名 操作无法完成(错误0x00000709).再次检查打印机名称,并确保打印机已连接到网络.(xp系统本 ...