JQuery Layer应用示例

最新推荐文章于 2021-11-14 08:57:43 发布

濮阳梦雪

最新推荐文章于 2021-11-14 08:57:43 发布

阅读量4.5k

点赞数 3

分类专栏： JQuery javaScript

本文链接：https://blog.csdn.net/zlj_blog/article/details/24994799

版权

本文介绍了基于JQuery的Layer弹窗插件的使用，它提供了灵活的自定义选项，便于创建各种交互体验。文章通过实例展示了如何实现登录窗口和广告窗口等常见功能，并给出了详细的代码示例。

摘要由CSDN通过智能技术生成

文章参考自：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),对无标题栏信息框层的重新封装

最低0.47元/天解锁文章

濮阳梦雪

关注

3
点赞
踩
0

收藏

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

layer，一个可以让你想到即可做到的web弹窗（层）解决方案（js组件），layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以使页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各种交互。
复制链接

扫一扫

专栏目录