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 ...
随机推荐
- Google Codejam 2016 Round1A Problem C BFFs 简单图论
链接 Google Codejam 2016 Round1A Problem C BFFs 题意 n个小朋友要坐成一个圈.每个小朋友心中都有一个Best Friend Forever.要保证每个人的左 ...
- Java 类和对象12
构造一辆汽车,油箱容量100L,当前里程数0,当前油量0,可以根据道路状况确定油耗,根据行驶速度与行驶时间, 输出当前油量与总里程数. public class Car_1 { // 车牌 priva ...
- pyton写购物车
pyton写购物车 基本要求: 用户输入工资,然后打印购物菜单用户可以不断的购买商品,直到余额不够为止退出时打印用户已购买的商品和剩余金额.. 1.这个程序功能不完整,bug很多,练手之作. good ...
- Orientdb基本操作
https://blog.csdn.net/clj198606061111/article/details/82314459
- mysql的关联查询简写
平常的内连接查询: SELECT * from ab_style as a INNER JOIN ab_url as b on a.style_bold=b.url_id 可支持简写风格: selec ...
- 微星(MSI)新主板B150M MORTAR U盘装win7的坎坷经历
新买的微星主板,热心的同事帮忙装好了win10,但是显卡驱动没装好,屏幕都快看瞎了眼,再者,楼主非常不喜欢win10的花哨,所以就装回了win7.下面来说一下我装win7的痛苦经历. 我是用UItra ...
- Vuex-一个专为 Vue.js 应用程序开发的状态管理模式
为什么会出现Vuex 非父子关系的组件如何进行通信?(Event Bus)bus.js import Vue from 'vue'; export default new Vue(); foo.vue ...
- 紫书 例题 10-９ UVa 1636 （概率计算）
小学数学问题 记得分数比较的时候可以交叉相乘(同号) #include<cstdio> #include<cstring> #define REP(i, a, b) for(i ...
- Unity 编辑器学习（四）之 静态游戏物体
一.Static GameObjects 关于静态对象的信息往往可以预先在编辑器里计算,不需要实时计算,进而优化性能,明显降低DrawCall. 各种Static说明: Lightmapping: 用 ...
- android YUV Sensor配置Camera应用的flash auto菜单
请在Config.ftbl.flashlight.h (mediatek\custom\common\hal\flashlight\src)中. 将全部的两处凝视掉的code: //CameraPar ...