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使用体验是怎样的更多相关文章

  1. js插件---bootstrap-datepicker.js是什么

    js插件---bootstrap-datepicker.js是什么 一.总结 一句话总结:选择时间的插件 时间选择插件 1.datepicker如何默认选择当前天? 直接给datepicker对应的i ...

  2. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  3. 推荐vue.js、layer.js、axios.js

    都是很简单又很实用的东西. vue.js,前端双向绑定框架. layer.js,前端遮罩层框架.(layui的一部分,可单独使用) axios.js,异步请求框架,用起来比jQuery的ajax舒服一 ...

  4. 可操纵网页URL地址的js插件-url.js

    url.js是一款能够很有用方便的操纵网页URL地址的js插件.通过url.js你能够设置和获取当前URL的參数,也能够对当前URL的參数进行更新.删除操作.还能够将当前URL的參数显示为json字符 ...

  5. 一款给力的一键复制js插件-clipboard.js

    一款没有依赖的.给力的一键复制的JS插件   点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...

  6. 解决IE6下PNG透明的JS插件:DD_belatedPNG.js

    DD_belatedPNG是一款解决IE6下PNG透明的JS插件,支持background-position和background-repeat属性,支持伪类.使用方法: <!--[if lte ...

  7. 在线阅读PDF文件js插件——pdf.js

    最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能. 首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobje ...

  8. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

  9. JS 插件 fastclick.js 解决手机端click点击延迟

    FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...

随机推荐

  1. Google Codejam 2016 Round1A Problem C BFFs 简单图论

    链接 Google Codejam 2016 Round1A Problem C BFFs 题意 n个小朋友要坐成一个圈.每个小朋友心中都有一个Best Friend Forever.要保证每个人的左 ...

  2. MyBatis、JDBC、Hibernate区别

    从层次上看,JDBC是较底层的持久层操作方式,而Hibernate和MyBatis都是在JDBC的基础上进行了封装使其更加方便程序员对持久层的操作. 从功能上看, JDBC就是简单的建立数据库连接,然 ...

  3. CUDA笔记（九）

    找了不知道多少教程,终于找到靠谱的nsight的: http://blog.csdn.net/mysniper11/article/details/8003644 还有两个视频的相关: http:// ...

  4. [NOIP2014提高组]寻找道路

    题目:洛谷P2296.Vijos P1909.codevs3731.UOJ#19. 题目大意:给你一张有向图,边权为1,让你找一条s到t的最短路径,但这条路径上所有点的出边所指向的点都与终点连通.如果 ...

  5. opencv——均值/中值滤波器去噪

    实验内容及实验原理: 1．用均值滤波器(即邻域平均法)去除图像中的噪声: 2．用中值滤波器去除图像中的噪声 3．比较两种方法的处理结果 实验步骤: 用原始图像lena.bmp或cameraman.bm ...

  6. users---显示当前登录系统的所有用户的用户列表

    users命令用于显示当前登录系统的所有用户的用户列表.每个显示的用户名对应一个登录会话.如果一个用户有不止一个登录会话,那他的用户名将显示相同的次数. 语法 users(选项) 选项 --help: ...

  7. mesg---设置当前终端的写权限

    mesg命令用于设置当前终端的写权限,即是否让其他用户向本终端发信息.将mesg设置y时,其他用户可利用write命令将信息直接显示在您的屏幕上. 语法 mesg(参数) 参数 y/n:y表示运行向当 ...

  8. 今日SGU 6.6

    sgu 177 题意:给你一个一开始全是白色的正方形,边长为n,然后问你经过几次染色之后,最后的矩形里面 还剩多少个白色的块 收获:矩形切割,我们可以这么做,离散处理,对于每次染黑的操作,看看后面有没 ...

  9. CF17E Palisection（回文树）

    题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...

  10. Rsyslog比较详细的

    http://blog.csdn.net/fishmai/article/details/51842340