是时候写个自己的dialog了

组件下载地址：http://pan.baidu.com/s/1pJFVfej

最近做的项目需要用到对话框，但是原生的弹出框你是知道的。如果有时间，还是自己尝试一下，也是可以的。

一个简单图

里面的输入框是定制的，可以自己定制

最干净的对话框应该是这样的

很干净的对话框，如果没有信息的话。

其实对话框基本就三个部分

1.标题信息

2.提示信息

3.确认按钮

那么html组件结构就好写了。

 

<!--dialog-->
        <div id="dialog" class="dialog">
            <div class="dia_inner">
                    <h1 class="dia_title"></h1>
                    <div class="dia_msg"></div>
                    <div class="dia_btn"></div>
            </div>
        </div>
<!--dialog-->

 

所有对话框都是这样的结构，不需要改动，上面提到的三个信息，在js中添加进去。

先引入组件的css和js文件

<link href="css/dialog.css" rel="stylesheet" />

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/dialog.js"></script>

需要jquery是因为query比较方便

然后书写自己的js

上一个demo的代码

$(function(){
        var dialog1 = new dialog({id:"dialog"});
        $("#btn").click(function(){
            dialog1.openDialog();
            dialog1.clickbtn();
        });
    });

dialog()中的参数有四个

id：id

title：title

msg：msg

btntext：btntext

其中id是必填的，其他参数有默认值，就是上面第二个图的样子

现在上dialog.js的源码，如果你正好闲着，可以拷贝过去试试

/*
2015年5月22日10:51:10
QQ：503305196
*/

//对话框对象
function dialog(options){
     this.init(options);//初始化方法
     this.obj = $("#"+options.id);
     this.closebtn();
}

dialog.prototype = {
    
    init:function(options){
        var title = options.title||"title";
        var msg = options.msg||"msg";
        var btntext = options.btntext||"btntext";
        $("#"+options.id+" .dia_title").html(title+"<span class='dia_close'>×</span>");
        $("#"+options.id+" .dia_btn").html("<button>"+btntext+"</button>");
    },
    /*打开回话框*/
    openDialog: function(){
        this.obj.animate({top:100},200);
    },
    /*关闭对话框*/
    closeDialog: function(){
        this.obj.animate({top:-300},200);
    },
    
    /*右上角关闭按钮*/
    closebtn: function(){
        
        var _obj = this.obj;
        _obj.find(".dia_close").click(function(){
            _obj.animate({top:-300},200);
        });
    },
    /*点击确认按钮*/
    clickbtn: function(fn){
        var _obj = this.obj;
        _obj.find(".dia_btn").click(function(){
            _obj.animate({top:-300},200,fn);
        });
        
    },
    
    /*自动隐藏对话框*/
    autohide: function(dely){//dely延时多长时间自动隐藏 1000
        var _obj = this.obj;
        setTimeout(function(){
            _obj.animate({top:-300},200);
        },dely);
    },
    /*设置对画框的文本提示信息*/
    setmsg:function(msg){
        this.obj.find(".dia_msg").html(msg);
    },
    settitle:function(title){
        this.obj.find(".dia_title").html(title+"<span class='dia_close'>×</span>");
    }
}

希望大家给意见，本人也是js菜鸟。写得不好的地方希望大牛指出来。

第一个图中输入框的写法给予参考

dia1.setmsg("<input type='text' id='tel'/>");

其实就是在setmsg中换成标签就可以了。这样很简单。