（8）kendo UI使用基础介绍与问题整理——dialog/个人思辩

     此处的入坑，大家自己理解吧，主要是想描述一下我做的项目实际应用的时候存在的一些困惑，以及我采用的强制办法等。

1、关于#dialog

      通过上面的介绍，大家会发现使用dialog需要在页面的html部分，写一个用于创建弹窗的div(<div id="dialog"></div>)，然后取它的id，通过这个id创建弹窗。

      我认为这样的使用方法，会在一个页面出现多个弹窗的情况下增加html代码的复杂度，也许这不并会增加多少工作量，不过我认为对于html和js分离项目，然后需要弹窗还要写两个部分的代码，不是一件很好的事情。

      我也并不认为这里的id，对于其他的部分的功能还有什么好处。并且要是这里的div要想添加内容，那么还需要先hide，总觉得这样制作出来的弹窗心好累。不过也不否认，身为一名程序员，处理这样的工作也不是很难的事情。

     ======================

      唠唠叨叨的部分到此先结束吧，既然选择了kendo，当然要接受它的全部，并且身为一名有使命感的程序员，有责任尽可能的用最合适的方式实现所需的功能。

      项目中因为弹窗很多，所以我通过js将需要的div添加到html的方法生成需要的html部分。

      并且为了防止id重复，id的名称是我通过一个计算的方法生成的名称。

 

      创建div的代码：

dialogIdkjlnh =1098999;//全局变量
function Dialog() {
    var dia;
    dialogIdkjlnh += 3;
    var dialogName = "dialog" + dialogIdkjlnh;
    var dialog = '<div id="' + dialogName + '"></div>';
    $("body").append(dialog);
    dia = "#" + dialogName;
    return $(dia);
};

     通过调用Dialog()这个方法，就成功的在html部分添加了一个div。

2、方法重写

因为我想自定义aler的显示标题和宽度大小，所以重写了alert方法和confirm方法。

重写kendo.alert demo：（自定义标题，没有关闭窗口的×）

kendo.alert = function (text) {
    var dialog = '<div id="kendoDiaAlert"></div>';
    if ($("body").find("#kendoDiaAlert").length == 0) {
        $("body").append(dialog);
    }
    var kendoDiaAlert = $("#kendoDiaAlert").kendoDialog({
        width: "280px",
        title: "提示",
        closable: false,
        close: function (e) {
            this.destroy();
        },
        content: '<div style="padding:40px 10px;text-align:center">' + text + '</div>',
        actions: [{
            text: '确定',
            primary: true,
            action: function () {
                kendoDiaAlert.close();
            }
        }]

    }).data("kendoDialog").open();

}

使用方法kendo.alert("这里是弹窗显示的文字！");

同理大家可以参考上面的demo，重写confirm方法。

3、后言

     最后我想吐槽一下使用的一些问题，先说一句抱歉，如有解决的妙法，希望大家不吝赐教，在此谢过！

    1）弹窗无法拖拽 

    2）无法设定位置，top的距离           （或许这种功能确实不太常用，可以通过样式实现解决）

    3）本身没有设置定时关闭的参数       （不过自定义完全可以实现）

   4）positon无法设置absolute，默认是fixed （不过倒是可以通过修改样式来实现）

   貌似主要就遇到上面的4个不适之处，在实际项目中，我的处理方法是通过修改样式、修改js的方式实现的，无形之中让代码变的冗余了很多，感觉很不舒服。

   dialog的整理到这里基本结束，欢迎大家留言评论，进行批评指正，感谢！

 

转载于:https://www.cnblogs.com/lindaCai/p/8391788.html