<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div class="div1" style="width:50px;border:1px solid #ddd;text-align:center">cc</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script src="layer.js"></script>

<script>

    $(".div1").on("click",function(){

        var val=$(this).html();

        switch (val){

            case "aa":

                layer.open({

                    type: 1,

                    area: ['600px', '360px'],

                    shadeClose: true, //点击遮罩关闭

                    content: '\<\div style="padding:20px;">自定义内容\<\/div>'

                });

                break;

            case "bb":

                layer.open({

                    type: 2,

                    title: 'iframe父子操作',

                    maxmin: true,

                    shadeClose: true, //点击遮罩关闭层

                    area : ['600px' , '320px'],

                    content: 'iframe.html'

                });

                break;

            case "cc":

                layer.tips('Hello tips!', '.div1');

                break;

            default:

                layer.msg("666");

        }

    })

</script>

</html>

jq layer插件使用的更多相关文章

  1. jq分页插件

    jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...

  2. 怎么用jq封装插件

    怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...

  3. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...

  4. layer插件学习——弹框（自定义页）

    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...

  5. layer插件学习——提示层

    本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...

  6. layer插件学习——询问框

    本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...

  7. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  8. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  9. layer插件open方法回掉值问题

    最近做项目需用到一个弹出层加载iframe页面的东西,首先想到layer插件,此插件用到过多次,兼容性很好,功能也强大,废话不多说上代码. 其实功能很简单,就是在目标页面选择一个值,回掉回来,说明一下 ...

随机推荐

  1. dual,rowid,rownum

    一. dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情,如下: 1.查看当前用户,可以在 SQL Plus中执行下面语句 s ...

  2. 如何优雅的处理Nodejs中的异步回调

    前言 Nodejs最大的亮点就在于事件驱动, 非阻塞I/O 模型,这使得Nodejs具有很强的并发处理能力,非常适合编写网络应用.在Nodejs中大部分的I/O操作几乎都是异步的,也就是我们处理I/O ...

  3. 命令行运行R语言脚本(代码)

    1 Windows: 键入 cd C:\Program Files\R\R-3.2.0\bin   工作目录切换到R的核心程序目录 键入 R BATCH F:\Test.R 或 Rscript F:\ ...

  4. Spring的起源和背景

    上图为Spring框架的组成结构 下面这几张也是的 Spring将大量实际开发中需要重复解决的步骤,抽象成了一个框架. 其中Spring Core Container是Spring框架的核心机制. S ...

  5. Web开发, 跳转时出现java.lang.ClassNotFoundException

    发生这种状况一般都是由于类找不到,要么是web.xml没有配对位置,要么是类没有放好

  6. hdu 5927 Auxiliary Set 贪心

    Auxiliary Set Time Limit: 9000/4500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Pr ...

  7. redis问题

    phalcon 在读取数据的时候如果说reids数据库没有连接成功的话,则会显示一下错误:

  8. [转载] C++ 程序员快过来围观：非常实用全面的 C++ 资源

    原文: http://codecloud.net/c-plus-plus-resource-2983.html 绝对是c++开发者的福音啊, 必须推荐. 这次的资源涉及到了标准库.Web应用框架.人工 ...

  9. 转：HTTP 301 跳转和302跳转的区别

    301和302 Http状态有啥区别?301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Permanently ...

  10. (转)Web自动化测试中的接口测试

    1.背景 1.1 Web程序中的接口 1.1.1 典型的Web设计架构 web是实现了基于网络通信的浏览器客户端与远程服务器进行交互的应用,通常包括两部分:web服务器和web客户端.web客户端的应 ...