zoukankan      html  css  js  c++  java
  • JavaScript实现自定义alert弹框

    一、自定义alert弹框知识点总结

    • 利用requireJS实现模块化管理;

    • 组合使用构造函数和原型模式实现弹框对象的创建;

    • 巧妙利用命名空间实现换肤功能;
    • 依赖jquery实现DOM操作;

    • 依赖$.extend()方法实现对象的扩展,即实现默认参数和用户传入参数;

    • 依赖jqueryUI实现弹框的拖动;

    • 自定义事件的实现原理。

     

    二、HTML代码(index.html)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义alert弹框</title>
        <link rel="stylesheet" href="style/window_alertBox.css"/>
        <script data-main="js/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
    </head>
    <body>
        <button id="btn">弹框</button>
    </body>
    </html>

     

    三、入口文件代码(main.js)

    
    
    // 配置路径及别名
    require.config({ baseUrl:
    'js', paths:{ jquery : 'jquery-1.9.1', jqueryUI : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min' } })
    // 初始化window弹框 require([
    'jquery','window'],function($,w){ $('#btn').on('click',function(){ var win = new w.Window(); win.alert({ title : '提示', content : '换肤功能实现喽', btnText : '确定按钮', width : 500, height : 300, skinClassName : 'window_skin_a', hasMask : true, dragHandel : '.window_header', handlerSureBtn : function(){ alert('我是点击确定按钮后的回调...'); }, hasCloseBtn : true, handlerCloseBtn : function(){ alert('我是点击关闭按钮后的回调...'); } }); win.on('alert',function(){ alert('点击确定按钮事件01') }); win.on('alert',function(){ alert('点击确定按钮事件02') }); win.on('close',function(){ alert('点击关闭按钮事件01') }); win.on('close',function(){ alert('点击关闭按钮事件02') }); }) })

    四、弹框模块实现(window.js)

    define(['jquery','jqueryUI'],function($,$UI){
    var Window = function(){ this.config = { title : '系统消息', // 弹框的标题文字 content : '内容', // 弹框的内容问题 btnText : '确定', // 弹框的按钮文字 width : 800, // 弹框的宽度 height : 500, // 弹框的高度 handlerSureBtn : null, // 弹框的按钮触发的事件 hasCloseBtn : false, // 弹框中是否显示关闭按钮 handlerCloseBtn : null, // 弹框关闭按钮触发的事件 skinClassName : null, // 弹框换肤 hasMask : true, // 弹框遮罩 isDraggable : true, // 弹框是否可拖动 dragHandel : null // 弹框中拖动的'把手':'.window_title' }; this.handlers = {}; // 弹框中的自定义事件集合 };
    Window.prototype
    = {
    // 自定义事件 on : function(type, handler){ if( typeof this.handlers[type] == "undefined" ){ this.handlers[type] = []; } this.handlers[type].push(handler); }, fire : function(type, data){ if( this.handlers[type] instanceof Array ){ var handlers = this.handlers[type]; for( var i = 0; i < handlers.length; i++ ){ handlers[i](data); } } }, // 弹框事件 alert : function(cfg){
    var that = this; var config = $.extend(this.config, cfg); // 弹框盒子 var boundingBox = $('<div class="window_boundingBox">' + '<div class="window_header">' + config.title + '</div>' + '<div class="window_body">' + config.content + '</div>' + '<div class="window_footer">' + '<input type="button" id="btn_sure" value=' + config.btnText + '>' + '</div>' + '</div>'); boundingBox.appendTo('body'); // 定制皮肤 if(config.skinClassName){ boundingBox.addClass(config.skinClassName); } //模态弹窗 if(config.hasMask){ var mask = $('<div class="window_mask"></div>'); mask.appendTo('body'); } //拖动属性 if(config.isDraggable){ if(config.dragHandel){ boundingBox.draggable({handle:config.dragHandel}); }else{ boundingBox.draggable(); } } // 设置宽、高、坐标 boundingBox.css({ config.width, height: config.height, left: (config.x || (window.innerWidth - config.width)/2) + 'px', top: (config.y || (window.innerHeight - config.height)/2) + 'px' }) // 关闭按钮 if(config.hasCloseBtn){ var closeBtn = $('<div class="closeBtn">X</div>'); boundingBox.append(closeBtn); $('.closeBtn').on('click',function(){ // config.handlerCloseBtn && handlerCloseBtn(); that.fire('close'); boundingBox.remove(); mask && mask.remove(); }) } // 确定按钮点击事件 $('#btn_sure').on('click',function(){ // config.handlerSureBtn && config.handlerSureBtn(); that.fire('alert'); boundingBox.remove(); mask && mask.remove(); }) // 为关闭按钮添加'close'事件 if( config.handlerCloseBtn ){ this.on('close',config.handlerCloseBtn); } // 为确定按钮添加'alert'事件 if( config.handlerSureBtn ){ this.on('alert',config.handlerSureBtn); } } }
    return { Window : Window }
    })

    五、CSS样式(window_alertBox.css)

    *{ 
        margin: 0; padding: 0;
    }
    html,body{
        width: 100%; height: 100%;
    }
    body{ 
        font: 14/1.5 normal 'Microsoft YaHei';  background-color: #fff;
    }
    
    /*默认样式*/
    .window_boundingBox{ 
        background-color: #fff; width: 600px; height: 360px; border: 1px solid #4d99cb; border-radius: 10px;                      
        box-shadow: 0 0 5px rgba(0,0,0,0.3); position: fixed; overflow: hidden; z-index: 2;
    }
    .window_header{
        color: #fff; width: 100%; background-color: #4d99cb; height: 36px; line-height: 36px; text-align: center;
    }
    .window_body{
        padding: 10px;
    }
    .window_footer{
        background-color: #dcdcdc; width: 100%; height: 36px; line-height: 36px; text-align: center;
        position: absolute;  bottom: 0;
    }
    .closeBtn{
        border-radius: 50%; cursor: pointer; width: 20px; height: 20px; padding: 2px; text-align: center;
        line-height: 20px; background-color: #fff; color: #333; position: absolute; right: 6px; top: 6px; color: #4d99cb;
    }
    .window_mask{
        background-color: #000; opacity: 0.3; width: 100%; height: 100%; position: fixed; left: 0; top:0; z-index: 1;
    }
    
    /*定制皮肤*/
    .window_skin_a.window_boundingBox{
        border: 1px solid red;
    }
    .window_skin_a .window_header{
        background-color:red;
    }
    .window_skin_a .closeBtn{
        color: red;
    }

    参考:慕课网 / 阿当大话西游之WEB组件

  • 相关阅读:
    HDU 2433 Travel (最短路,BFS,变形)
    HDU 2544 最短路 (最短路,spfa)
    HDU 2063 过山车 (最大匹配,匈牙利算法)
    HDU 1150 Machine Schedule (最小覆盖,匈牙利算法)
    290 Word Pattern 单词模式
    289 Game of Life 生命的游戏
    287 Find the Duplicate Number 寻找重复数
    283 Move Zeroes 移动零
    282 Expression Add Operators 给表达式添加运算符
    279 Perfect Squares 完美平方数
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5584573.html
Copyright © 2011-2022 走看看