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. 13.C语言隐藏黑窗口

    //预编译,linker链接,Windows模式 #pragma comment(linker,"/subsystem:\"windows\" /entry:\" ...

  2. 安卓开发--sharedpreferences存储数据

    @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); s ...

  3. BZOJ 2424 DP OR 费用流

    思路: 1.DP f[i][j]表示第i个月的月底 还剩j的容量 转移还是相对比较好想的-- f[i][j+1]=min(f[i][j+1],f[i][j]+d[i]); if(j>=u[i+1 ...

  4. Hadoop的目录结构

  5. iOS网络缓存机制

    iOS的网络引擎自带缓存机制: 网络请求在经过网络引擎时有过处理(添加了字段),所以用api的网络请求无法获取缓存. [NSURLCache sharedURLCache]

  6. datable

    $("#table_d").append("<table id='dmglTable' class='table table-striped table-hover ...

  7. shell判断变量是字符还是数字

    ok,以后最好是每天一个shell小脚本吧,这样以后工作时还可以直接套用,嗯,比较不错,顺便还可以带给刚入门shell的朋友一些帮助,好了,废话不多说,下面是我两种判断的实现方式: 1.通过grep去 ...

  8. 20180929 北京大学 人工智能实践：Tensorflow笔记05

    (完)

  9. POJ——T 3728 The merchant

    http://poj.org/problem?id=3728 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5068   A ...

  10. ArcGIS api for javascript——地理处理任务-服务区域任务

    描述 本例展示了如何发送一些输入值到ArcGIS Server上的GIS模型并获得结果反馈给web应用.本例中,模型计算自在地图上单击点起始的驱动时间多边形. 例如,这个分析类型可用于想要知道多少人生 ...