JQuery Layer应用示例

最新推荐文章于 2024-05-21 15:43:31 发布

yuanfangfan

最新推荐文章于 2024-05-21 15:43:31 发布

阅读量542

点赞数

分类专栏： jQuery 文章标签： jquery

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章参考自：http://sentsin.com/jquery/layer/，本文中所使用到的属性和方法具体含义及使用可通过此链接进行查看。

layer，是一个很实用的基于JQuery开发的web弹窗（层）插件。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各种交互。

本文中列举了几个比较常用的Layer示例，比如我们经常见到的页面弹出登陆窗口、页面中弹出广告窗口等等，页面为layerTest.html,详细代码如下：

<!doctype html>
<html>
<head>
    <title>layerTest....</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="layer/layer.min.js"></script>
    <style>
        body{margin-top: 40px;text-align: left}
        #about_hide{display:none}
        .btn{
            padding:3px 18px;
            background-color: #32cd32
        }

    </style>
    <script>
        function advDiv(){
            $.layer({
                type : 2,
                closeBtn : false,
                shadeClose: true,
                time : 2,
                iframe : {
                    src:'http://www.baidu.com'
                },
                title : false,
                area : ['500px','300px'],
                success : function(){ //层加载成功后进行的回调
                    layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画，
                                                     //在success回调中使用,type：动画类型，rate:频率，单位：毫秒
                                                     //当前设置为：浏览器右下角弹出,速率为1000ms
                },
                end : function(){ //层关闭后执行的回调
                    layer.msg("层已关闭")
                }
            });
        }
        $(function(){
            //信息窗示例
            $("#infoWin").click(function(event){
                event.preventDefault();
                /*layer.alert(alertMsg , alertType, alertTit , alertYes),
                  对单按钮信息框的重新封装
                  alertMsg：信息内容（文本）
                  alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1
                  alertTit：标题（文本）, alertYes：按钮的回调函数。
                 */
                layer.alert('hello，welcome to layer', 9,'信息框');
            });
            //确认框示例
            $("#confWin").click(function(event){
                event.preventDefault();
                /*layer.confirm(conMsg , conYes , conTit , conNo)
                 对询问框的重新封装，
                 conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本）
                 conNo：按钮二的回调。
                 */
                layer.confirm('确定要删除本条记录？',function(){
                    //layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装，
                    // msgText：信息内容（文本），
                    // msgTime：自动关闭所需等待秒数（默认2秒），
                    // 如果parme是一个数字，则将作为msg的图标参数，
                    // 如果parme是一个函数，则将作为层消失后的end的回调，
                    // 如果parme是一个object，
                    // 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置,
                    // rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明}
                    layer.msg('删除成功',1,{shade:true});
                },'删除数据',function(){
                    layer.msg('取消操作',1,{shade:false});
                });
            });
            //提示框示例
            $("#tipsWin").mouseover(function(event){
                event.preventDefault();
                /*layer.tips(html, follow, parme),对tips层的重新封装，
                  html：信息内容（文本），follow：触发事件对应的选择器，
                  parme是一个对象，其中包含了{time:自动关闭所需等待秒数,
                  maxWidth:最大宽度, guide:指引方向,
                  style: tips样式（参加api表格一中的style属性）,
                  closeBtn:关闭按钮，默认为false}等参数
                */
                layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
                    maxWidth:185,
                    guide:1,
                    closeBtn:[0,true] //显示关闭按钮

                });
            });
            $("#pageLayerBtn").click(function(){
                $.layer({
                    shade : false,
                    type : 1,
                    area : ['auto','auto'],
                    title : false,
                    border :[1 , 0.3 , '#000', true],
                    //page : {dom : '#layer_notice'},//dom方式显示页面层
                    page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+//html方式
                            '111111111111111111111111111111<br>'+
                            '222222222222222222222222222222<br>'+
                            '333333333333333333333333333333'+
                            '</div>'},
                    close : function(index){
                        layer.close(index);
                    }
                });
            });
            //弹出iFrame层示例
            $("#login").click(function(){
                $.layer({//$.layer() 核心接口，参数是一个JSON对象
                    type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，
                             //3：加载层，4：tips层，调用时必须设置。
                    border : [1 , 1 , 'gray', true],
                    shade : [0.5 , '#000' , true],
                    title : ['<div style="text-align: center"> 登录</div >',true],
                    iframe : {src : 'html/login.html'},
                    area : ['400px' , '250px'],
                    offset : ['100px',''],
                    move : ['.xubox_title' , false]
                });
            });
        })
    </script>
</head>
<body οnlοad="advDiv()">
<div style="text-align:left;margin-left: 80px">
    <a href="" id="infoWin">单击时弹出信息窗</a><br><br>
    <a href="" id="confWin">单击时弹出确认框</a><br><br>
    <label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br>
    <input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br>
    <div style="background-color:green;display: none" id="layer_notice">
        111111111111111111111111111111<br>
        222222222222222222222222222222<br>
        3333333333333333333333333333333
    </div>
    <input id="login" class="btn"  type="button" value="登  录" title="iFrame层示例"/>
</div>
</body>
</html>

上述示例的登录页面，为位于layerTest.html所在目录的html目录下的login.html，具体代码如下：

<!doctype html>
<html>
<head>
    <title>layerTest....</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="layer/layer.min.js"></script>
    <style>
        body{margin-top: 40px;text-align: left}
        #about_hide{display:none}
        .btn{
            padding:3px 18px;
            background-color: #32cd32
        }


    </style>
    <script>
        function advDiv(){
            $.layer({
                type : 2,
                closeBtn : false,
                shadeClose: true,
                time : 2,
                iframe : {
                    src:'http://www.baidu.com'
                },
                title : false,
                area : ['500px','300px'],
                success : function(){ //层加载成功后进行的回调
                    layer.shift('right-bottom',1000); //layer.shift(type , rate),layer弹出时内置动画，
                                                     //在success回调中使用,type：动画类型，rate:频率，单位：毫秒
                                                     //当前设置为：浏览器右下角弹出,速率为1000ms
                },
                end : function(){ //层关闭后执行的回调
                    layer.msg("层已关闭")
                }
            });
        }
        $(function(){
            //信息窗示例
            $("#infoWin").click(function(event){
                event.preventDefault();
                /*layer.alert(alertMsg , alertType, alertTit , alertYes),
                  对单按钮信息框的重新封装
                  alertMsg：信息内容（文本）
                  alertType：提示图标（整数，0-16的选择）,若不需要显示，可设置为-1
                  alertTit：标题（文本）, alertYes：按钮的回调函数。
                 */
                layer.alert('hello，welcome to layer', 9,'信息框');
            });
            //确认框示例
            $("#confWin").click(function(event){
                event.preventDefault();
                /*layer.confirm(conMsg , conYes , conTit , conNo)
                 对询问框的重新封装，
                 conMsg：信息内容（文本）,conYes：按钮一回调, conTit：标题（文本）
                 conNo：按钮二的回调。
                 */
                layer.confirm('确定要删除本条记录？',function(){
                    //layer.msg(msgText, msgTime, parme),对无标题栏信息框层的重新封装，
                    // msgText：信息内容（文本），
                    // msgTime：自动关闭所需等待秒数（默认2秒），
                    // 如果parme是一个数字，则将作为msg的图标参数，
                    // 如果parme是一个函数，则将作为层消失后的end的回调，
                    // 如果parme是一个object，
                    // 可配置{type:图标类型,shade：false//是否遮罩，如果是，不用配置,
                    // rate:'top'//弹出的动画类型，具体值见layer.shift的参数说明}
                    layer.msg('删除成功',1,{shade:true});
                },'删除数据',function(){
                    layer.msg('取消操作',1,{shade:false});
                });
            });
            //提示框示例
            $("#tipsWin").mouseover(function(event){
                event.preventDefault();
                /*layer.tips(html, follow, parme),对tips层的重新封装，
                  html：信息内容（文本），follow：触发事件对应的选择器，
                  parme是一个对象，其中包含了{time:自动关闭所需等待秒数,
                  maxWidth:最大宽度, guide:指引方向,
                  style: tips样式（参加api表格一中的style属性）,
                  closeBtn:关闭按钮，默认为false}等参数
                */
                layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
                    maxWidth:185,
                    guide:1,
                    closeBtn:[0,true] //显示关闭按钮


                });
            });
            $("#pageLayerBtn").click(function(){
                $.layer({
                    shade : false,
                    type : 1,
                    area : ['auto','auto'],
                    title : false,
                    border :[1 , 0.3 , '#000', true],
                    //page : {dom : '#layer_notice'},
                    page:{html:'<div style="background-color:#90ee90;" id="layer_notice">'+
                            '111111111111111111111111111111<br>'+
                            '222222222222222222222222222222<br>'+
                            '333333333333333333333333333333'+
                            '</div>'},
                    close : function(index){
                        layer.close(index);
                    }
                });
            });
            //弹出页面层示例
            $("#login").click(function(){
                $.layer({//$.layer() 核心接口，参数是一个JSON对象
                    type : 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，
                             //3：加载层，4：tips层，调用时必须设置。
                    border : [1 , 1 , 'gray', true],
                    shade : [0.5 , '#000' , true],
                    title : ['<div style="text-align: left"> 登录</div >',true],
                    iframe : {src : 'html/login.html'},
                    area : ['400px' , '250px'],
                    offset : ['100px',''],
                    move : ['.xubox_title' , false]
                });
            });
        })
    </script>
</head>
<body οnlοad="advDiv()">
<div style="text-align:left;margin-left: 80px">
    <a href="" id="infoWin">单击时弹出信息窗</a><br><br>
    <a href="" id="confWin">单击时弹出确认框</a><br><br>
    <label id="tipsWin">鼠标移过来时,弹出提示框</label><br><br>
    <input type="button" value="页面层" id="pageLayerBtn" title="页面层示例" class="btn"><br><br>
    <div style="background-color:green;display: none" id="layer_notice">
        111111111111111111111111111111<br>
        222222222222222222222222222222<br>
        3333333333333333333333333333333
    </div>
    <input id="login" class="btn"  type="button" value="登  录" title="iFrame层示例"/>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登录</title>
    <style>
        body
        {
            font-size: 16px; vertical-align: middle;
        }
        .login_main_div
        {
            background-color: green;
            clear: both;
        }
        .login_main_table
        {
            float: left; padding-left: 30px;margin-bottom: 0px;
        }
        #erroDiv
        {
            height: 15px; padding-top: 5px; padding-bottom: 5px;
        }
        .username,.userPwd
        {
            width: 220px;
        }
        .rememberPass_td
        {
            height:55px;
        }
        .loginBtn
        {
            border:medium none;
            background:#3f89ec;
            margin-left: 60px;
            height:35px;
            color:#fff;
            font-size:16px;
            cursor:pointer;
            font-weight:bold;
            width: 220px;;
        }
        .reg
        {
            font-family:Arial, Helvetica, STHeiti, "宋体"; color: #1b66c7;
            font-size:12px;
            text-decoration:none;
            float: right;
            cursor:  pointer;
        }
    </style>
</head>
<body>
    <div class="login_main_div">
       <table class="login_main_table" width="350" border="0" align="right" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td>
                        <div id="erroDiv">

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        用户名:
                        <input  class="username" name="tbUserName" type="text" maxlength="25" id="tbUserName">
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 12px">
                        密   码
                                    <input class="userPwd" name="tbPassword" type="password" maxlength="50" id="tbPassword">
                    </td>
                </tr>
                <tr>
                    <td class="rememberPass_td">
                        <input id="passCheckbox" type="checkbox" name="memberPass">
                        <label>
                            记住密码
                        </label>
                        <a target="_blank"  href="" class="reg">
                            立即注册
                        </a>
                    </td>
                </tr>
                <tr >
                    <td >
                        <input id="login" value=登录 type="submit" class="loginBtn">
                    </td>
                </tr>
                </tbody></table>
    </div>
</body>
</html>

运行结果如下：

转载来源：http://blog.csdn.net/zlj_blog/article/details/24994799

yuanfangfan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery Layer应用示例

文章参考自：http://sentsin.com/jquery/layer/，本文中所使用到的属性和方法具体含义及使用可通过此链接进行查看。 layer，是一个很实用的基于JQuery开发的web弹窗（层）插件。layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各种交互。
复制链接

扫一扫