JS~Boxy和JS模版实现一个标准的消息提示框

面向对象的封装

面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可,而对于JS来说,我们也可以利用面向对象的封装性来实现一个标准的消息提示框。

JS模版

使用JS模版可以大大提高开发效率,有了模版,你不用在去拼接JS串了,这对于开发者来说绝对是个福音!看它多少漂亮:

标准消息弹出框的完整代码

<script src="~/Scripts/jquery-plugin-boxy/js/jquery.boxy.js"></script>
<link href="~/Scripts/jquery-plugin-boxy/css/boxy.css" rel="stylesheet" />
<script type="text/html" id="alertBox">
    <div style="width: 200px; text-align: center;">
        <b>[Content]</b>
    </div>
</script>
<script type="text/ecmascript">
    function alertBox(msg, timer) {
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", igm); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
        var html = document.getElementById("alertBox").innerHTML;
        var result = html.replace(reg, function (node, key) { return { Content: msg }[key]; });

        var options = { title: 消息提示, closeText: x };
        var timer = timer || 5000;//5s
        new Boxy(result, $.extend({
            behaviours: function () {
                setTimeout($(".boxy-wrapper").hide();, timer);
            }
        }, options));
    }

下面是调用时候的代码

alertBox("您有1个消息,请注意查收!", 2000);

下面是运行效果图

怎么样够精简吧,呵呵!

JS~Boxy和JS模版实现一个标准的消息提示框,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。