(jQuery)扩展jQuery系列之一：模拟alert，confirm（一）

很多人都为了使alert系统的调用函数在自己的控制范围之内，都选择了去封装一个属于自己的alert组件，现在我们就动手实现一个这样的小部件。

效果图

全部代码

 

代码

/**
 * @author xing
*/
(function($){
    $.extend({
        alert:function(html,callback){
var dialog=new Dialog();
            dialog.build('alert',callback,html);
        },
        confirm:function(html,callback){
var dialog=new Dialog();
            dialog.build('confirm',callback,html);
        }
    });
var Dialog=function(){
var render={
            template:' <div class="alertParent"><div class="alertContent"><h2 class="title">系统提示</h2><div class="alertHtml">你的操作出现错误！</div><div class="btnBar"><input type="button" value="确定" >(type,callback,html){
                render.renderDialog(type,callback,html);
            }
        }
    }

})(jQuery);

css

代码

div.alertParent{
                padding:6px;
                background:#ccc;
                background:rgba(201,201,201,0.8);
                width:auto;
                position:absolute;
                -moz-border-radius:3px;
                font-size:12px;
                top:50px;
                left:50px;
}
            div.alertContent{
                background:#fff;
                width:350px;
                height:auto;
                border:1px solid #999;
}
            h2.title{
                width:100%;
                height:28px;
                background:#0698E9;
                text-indent:10px;
                font-size:12px;
                color:#fff;
                line-height:28px;
                margin:0;
}
            div.alertHtml{
                background:url(dtips.gif) 0 0 no-repeat;
                height:50px;
                margin:10px;
                margin-left:30px;
                text-indent:50px;
                line-height:50px;
                font-size:14px;
}
            div.btnBar{
                border-top:1px solid #c6c6c6;
                background:#f8f8f8;
                height:30px;
}
            div.btnBar input{
                background:url(sure.png) no-repeat;
                border:0;
                width:63px;
                height:28px;
                float:right;
                margin-right:5px;
}

HTML

代码

<div class="alertParent">
<div class="alertContent">
<h2 class="title">系统提示</h2>
<div class="alertHtml">
                    你的操作出现错误！
</div>
<div class="btnBar">
<input type="button" value="确定"/>
</div>
</div>
</div>

调用方法

$.alert('我的电脑');
//$.confirm('确定删除？',function(){
                    //alert('cccc')
                //});

 

 

高手勿笑，为了说明实现的方式，我并没有仔细的去完善这段代码，仅仅是在写作的半小时内写出的，所以有很多地方没有去思考，有很多的纰漏，并且以一个比较笨的方式实现了这个模拟的alert，不过下次我们将通过构建Button的方式实现一个组件，会加入遮罩，ajax调用，iframe宽度高度自适应等更强大的功能。