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 ...
随机推荐
- java9新特性-12-集合工厂方法：快速创建只读集合
1.官方Feature 269: Convenience Factory Methods for Collections 2.产生背景 要创建一个只读.不可改变的集合,必须构造和分配它,然后添加元素, ...
- ListView中嵌套GridView点击事件
做一个项目时,需要在ListView中嵌套GridView,因为ListView的每个条目中不一定出现GridView,那么问题来了,添加GridView的Item的点击事件后,有GridView出现 ...
- codeforces 527 C Glass Carving
Glass Carving time limit per test 2 seconds Leonid wants to become a glass carver (the person who cr ...
- CentOS7.4-btrfs管理及使用
btrfs, B-tree File System, GPL开源文件系统, 支持CoW即读时写入. 核心特性: 多物理卷支持; btrfs可由多个底层磁盘组成 支持RAID mkfs.btrfs 命令 ...
- 关于element-ui框架里面table组件的使用
1.表格的数据放哪里:后台返回的列表数据放到:data后面. 2.每一个列怎么显示数据:返回的列表里面的属性想要在列显示出来,将对应的字段名写到prop后面就行. 3.列表上面想显示序号:{{scop ...
- [洛谷P2394]yyy loves Chemistry I
题目大意:给你一个实数x($0<x\leq 1$),要你求x/23的值(保留8位小数). 解题思路:此题用double读的精度是不够的,用long double直接读入也会WA,正确做法是“sc ...
- Maven 工程 POM.XML文件最全详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 【转】黄聪：HtmlAgilityPack教程案例
[转]黄聪:HtmlAgilityPack教程案例 HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 publ ...
- berkeley db储存URL队列的简单实现增、删、查
Berkeley DB(BDB)是一个高效的嵌入式数据库编程库,C语言.C++.Java.Perl.Python.Tcl以及其它非常多语言都有其相应的API. Berkeley DB能够保存随意 ...
- IDEA中的maven web 项目中如何设置自己的本地仓库
我们在创建maven项目的时候如何不使用系统指定的本地仓库,而使用自己设置的仓库呢,这里小女子就来进行讲解一下吧! 讲解一:你要想找到settings.xml你就要自己我去官网上去下载apache-m ...