JS引入命名空间(并使用字符串拼接和拖拽)

(function(){
    //引入命名空间
    /**
         * 弹窗
         * @title {string} 弹窗类型
         * @msg {string} 弹窗信息
         * @icon {string} 弹窗提示图标
         * @fn {function} 处理函数
         */
    $.messager={
        alert:function(title,msg,icon,fn){
            //先增加遮罩
            var $body=$("body");
            $body.addClass("messager-mask");
            //再生成弹窗DOM
            var messagerHtml="";
            messagerHtml+='<div class="messager-window">';
            messagerHtml+='<div class="messager-inner">';
            messagerHtml+='<div class="messager-header">';
            messagerHtml+='<div class="messager-title">{0}</div>';
            messagerHtml+='<div class="messager-close">';
            messagerHtml+='<a href="javascript:void(0);"></a>';
            messagerHtml+='</div>';
            messagerHtml+='</div>';
            messagerHtml+='<div class="messager-content">';
            messagerHtml+='<div class="messager-icon messager-{2}"></div>';
            messagerHtml+='<div class="messager-msg">{1}</div>';
            messagerHtml+='<div style="clear:both;"></div>';
            messagerHtml+='</div>';
            messagerHtml+='<div class="messager-footer">';
            messagerHtml+='<a href="javascript:void(0);" class="messager-btn ok"><span class="messager-btn-text">OK</span></a>';
            //messagerHtml+='<a href="javascript:void(0);" class="messager-btn cancel"><span class="messager-btn-text">Cancel</span></a>';
            messagerHtml+='</div>';
            messagerHtml+='</div>';
            messagerHtml+='</div>';
            //将参数拼接进DOM结构中
            var messager=$.ex_formatStr(messagerHtml,title,msg,icon);
            //将弹窗DOM加入到body中
            $body.append(messager);
            var destroy=function(){
                $body.removeClass("messager-mask");
                $(".messager-window").detach();
            };
            //绑定close按钮关闭事件,销毁DOM
            $(".messager-close a").click(function(){
                destroy();
            });
            //绑定OK按钮事件,销毁DOM
            /*$(".messager-btn.ok").on("click",function(fn){
                //fn();发送请求
                destroy();
            });*/
            $(".messager-btn.ok").click(function(fn){
                //fn();发送请求
                destroy();
            });
            //可拖动设置
            var target=$(".messager-window"),
                moveBar=$(".messager-header");
            $.ex_moveDiv(target,moveBar);
        },
        confirm:function(title,msg,fn){
            $.messager.alert(title,msg,"question",fn);
            var cancel='<a href="javascript:void(0);" class="messager-btn cancel"><span class="messager-btn-text">Cancel</span></a>';
            $(".messager-btn.ok").after(cancel);
            $(".messager-btn.cancel").click(function(fn){
                //fn();发送请求
                $("body").removeClass("messager-mask");
                $(".messager-window").detach();
            });
        }
    }
})(jQuery);

在另一个JS函数中直接就可以调用了

$("#messager-alert a").eq(0).on("click", function () {
        $.messager.alert('My Alert', 'Here is a message!');
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值