zoukankan      html  css  js  c++  java
  • JS~重写alter与confirm,让它们变成fancybox风格

    插件与系统命令

    对于很多JS弹框插件来说,都提供了alter,confirm等功能,如fancybox,Boxy等插件,今天来介绍一下如何将系统的alter和confirm替换成指定插件的alter和confirm,使用替换的方式的好处就是不用修改之前的代码,这在面向对象里,

    叫做“对修改关闭,对扩展开放”,也称为OCP原则,即开闭原则。

    fancybox替换系统命令,它需要有一个HTML容器来展现弹框

    <script id="MessageBox_delete" type="text/html">
        <!--试题删除确认弹出框 start-->
        <div class="r_warnBox" style=" 276px;">
            <div class="r_warnBox_tit">
                <h3><strong>提示</strong></h3>
            </div>
            <div class="r_roomBoxContDel">
                <p class="alert">您确定删除作业吗?</p>
                <p class="confirm"><a class="sure" href="javascript:;">确定</a><a class="cancel" href="javascript:;" onclick="$.fancybox.close();">取消</a></p>
            </div>
            <a class="r_warnBox_close" href="javascript:;" onclick="$.fancybox.close();"></a>
        </div>
        <!--试题删除确认弹出框 end-->
    </script>
    <!--弹出框1 start-->
    <script id="MessageBox_message" type="text/html">
        <div class='r_warnBox' style=' 433px; padding-right: 30px;'>
            <div class='r_warnBox_tit'>
                <h3><strong>提示
                </strong></h3>
            </div>
            <div id='alert_message' class='r_roomBoxCont'>
                <p class='alert'>[Content]</p>
            </div>
            <a class='r_warnBox_close' href='javascript:;' onclick="$.fancybox.close()"></a>
        </div>
    </script>
    <!--弹出框1 end-->

    下面是复写语句

     window.alert = function (msg) {
            var reg = new RegExp("\[([^\[\]]*?)\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
            var html = document.getElementById("MessageBox_message").innerHTML;
            var result = html.replace(reg, function (node, key) { return { 'Content': msg }[key]; });
            $.fancybox(result, {
                'padding': 0,
                'scrolling': 'visible',
                'closeBtn': false,
                'modal': false
        });
    
        }
        window.confirm = function (msg, callBack) {
            $.fancybox($("#MessageBox_delete").html(), {
                'padding': 0,
                'scrolling': 'visible',
                'closeBtn': false,
                'modal': false,
                afterShow: function () {
                    $('p.confirm a.sure').on('click', function () {
                        callBack();
                    });
                }
            });
    
        }

    下面是调用语句

    function alerttest() {
            alert("ok");
        }
        function confirmtest() {
            confirm("are you sure!", function () { alert("删除成功") });
        }

    Boxy替换系统命令,使用相对简单,它已经为我们创建的弹框的DIV

    window.alert = function (msg) {
      Boxy.alert(msg);
    }
    
    window.alert = function (msg,callback) {
      Boxy.confirm(msg,callback);
    }

    调用和fancybox也是一样的

      function alerttest() {
            alert("ok");
        }
      function confirmtest() {
            confirm("are you sure!", function () { alert("删除成功") });
        }

    最后运行效果如图

  • 相关阅读:
    P1144 最短路计数 题解 最短路应用题
    C++高精度加减乘除模板
    HDU3746 Teacher YYF 题解 KMP算法
    POJ3080 Blue Jeans 题解 KMP算法
    POJ2185 Milking Grid 题解 KMP算法
    POJ2752 Seek the Name, Seek the Fame 题解 KMP算法
    POJ2406 Power Strings 题解 KMP算法
    HDU2087 剪花布条 题解 KMP算法
    eclipse创建maven项目(详细)
    maven的作用及优势
  • 原文地址:https://www.cnblogs.com/lori/p/3586075.html
Copyright © 2011-2022 走看看