此处的入坑,大家自己理解吧,主要是想描述一下我做的项目实际应用的时候存在的一些困惑,以及我采用的强制办法等。
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的整理到这里基本结束,欢迎大家留言评论,进行批评指正,感谢!