• (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({
             "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的整理到这里基本结束,欢迎大家留言评论,进行批评指正,感谢!

  • 相关阅读:
    Linux环境下安装python3
    软件测试类型
    系统测试分类
    测试级别
    测试对象的介绍
    软件测试基本介绍
    简易留言板(还有一些小bug,修复ing...)
    Hosting static website on AWS
    Add a dependency in Android Studio
    Python good tutorials
  • 原文地址:https://www.cnblogs.com/lindaCai/p/8391788.html
Copyright © 2020-2023  润新知