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. Car Talk2

    #! /usr/bin/python # -*- coding: utf-8 -*- # # # “Recently I had a visit with my mom and we realized ...

  2. NSStream 流式思想

    流式思想的本质是将数据或信号看作流.流的管理者NSStream看作管道. 内容包含两方面: 1.流的建立:源.目的地: 2.流的管理:状态事件与数据事件. 本质上是建立联系.处理数据.处理状态.

  3. vue分页组件火狐中出现样式问题

    分页的操作到了火狐浏览器会样式 怎么解决? 其实就是将input的type属性变成了text,因为number属性会变成上下的小箭头

  4. 冒泡排序php

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <b ...

  5. Kubernetes1.5 集成Heapster

    Kubernetes1.5 集成Heapster Heapster是kubernetes集群监控工具.在1.2的时候,kubernetes的监控需要在node节点上运行cAdvisor作为agent收 ...

  6. NodeJS学习笔记 (14)URL查询字符串-querystring(ok)

    模块概述 在nodejs中,提供了querystring这个模块,用来做url查询参数的解析,使用非常简单. 模块总共有四个方法,绝大部分时,我们只会用到 .parse(). **.stringify ...

  7. [Codeforces 841C]Leha and Function

    题目大意:定义函数F(n,k)为[1,2,3,..n]中k个元素的子集中最小元素的数学期望.现在给你两个长度相等的数列A,B(A中元素严格大于B中元素),现在要你重新排列A,使得$\sum\limit ...

  8. [转载]CentOS 7虚拟机下设置固定IP详解

    在 复制 他人作品之前,是因为我再此“跌倒”过一次,虽然原主说是永久地址,但是地址失效 不可避免.所以就原封不动的copy了过来,我自己也是按照他的一步一步配置的,我成功了,相信你们也会成功. 如果不 ...

  9. Win10+TensorFlow-gpu pip方式安装，anaconda方式安装

    中文官网安装教程:https://www.tensorflow.org/install/install_windows#determine_how_to_install_tensorflow 1.安装 ...

  10. POJ1158 城市交通Traffic lights IOI 1999 (最短路)

    POJ1158 城市交通Traffic lights IOI 1999 (最短路) (1) 问题描述(probolem) 在d城里交通的安排不同寻常,城中有路口和路口之间的道路,再任意两个不同的路口之 ...