zoukankan      html  css  js  c++  java
  • layer弹出层

    layer弹出层

    layer弹出层是基于jQuery的js插件。应用步骤如下:

    1.引入jQuery核心包和layer.js文件

    这里写图片描述

    2.调用layer的插件函数

    这里写图片描述

    3.layer的主要配置项

    (1)title:标题

    (2)maxmin:最大化最小化控件

    (3)area:弹出层宽高

    (4)type:弹出层类型(值为0-4)

    ​ type=0时,content中填写显示的内容

    ​ type=1时,content中为对象,弹出当前页面的一个块

    ​ type=2时,content中为文件地址,弹出另一个文件

    (5)content:弹出层内容

    (6)主要函数:

    ​ layer.alert(‘弹出框’);

    ​ layer.confirm(‘提示选择框’);

    4.实例

    测试页面test.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>layer弹出层测试</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="layer.js"></script>
    </head>
    <body>
    <div id="d">div标签中的内容</div>
    
        <script type="text/javascript">
            // (1)type=0,content中填写显示的内容
    
            // layer.ready(function(){
            //  layer.open({
            //      type:0,
            //      title:'弹出层测试1',
            //      maxmin:true,
            //      area:['800px','500px'],
            //      content:'第一个弹出层测试'
            //  })
            // })
    
            // (2)type=1, content=对象,弹出当前页面中的一个块
    
            // layer.ready(function(){
            //  layer.open({
            //      type:1,
            //      title:'弹出层测试2',
            //      maxmin:true,
            //      area:['800px','500px'],
            //      content:$('#d')
            //  })
            // })
    
            // (3)type=2,content=文件地址,将另一个文件弹出
    
            layer.ready(function(){
                layer.open({
                    type:2,
                    title:'弹出层测试3',
                    maxmin:true,
                    area:['800px','500px'],
                    content:'a.html'
                })
            })
    
        </script>
    </body>
    </html>

    弹出文件a.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <p>弹出层测试文件</p>
    </body>
    <script type="text/javascript">
    
        //绑定点击事件,关闭弹出层
        $(document).click(function(){
            //获取弹出层id
            var index = parent.layer.getFrameIndex(window.name);
            //调用layer.close方法,关闭弹出层
            parent.layer.close(index);
        })
    </script>
    </html>

    代码及相关文件详见GitHub主页 弹出层插件layer

    https://github.com/Jianxq12/ITcast/tree/master/Ajax

  • 相关阅读:
    Automated Telephone Exchange
    Babelfish
    又见回文
    487-3279
    Robot Motion
    99. Recover Binary Search Tree
    98. Validate Binary Search Tree
    97. Interleaving String
    96. Unique Binary Search Trees
    95. Unique Binary Search Trees II
  • 原文地址:https://www.cnblogs.com/Jianxq12/p/7684307.html
Copyright © 2011-2022 走看看