首页 > 代码库 > 利用kendo ui window创建自己的promise window
利用kendo ui window创建自己的promise window
新建一个appdialog.js文件,代码如下
var contexts = {}; var dialogCount = 0; var app = { getDialog: function (obj) { if (obj) { return obj.__dialog__; } return undefined; }, close: function (obj) { var theDialog = this.getDialog(obj); if (theDialog) { var rest = Array.prototype.slice.call(arguments, 1); theDialog.close.apply(theDialog, rest); } }, initOption: function (obj) { var kendowindOption = { actions: ["Pin", "Refresh", "Maximize", "Minimize", "Close"], draggable: true, pinned: true, height: "450px", modal: true, resizable: true, title: "新增", width: "700px" }; if (obj) { if (obj.actions) { kendowindOption.actions = obj.actions; } if (obj.height) { kendowindOption.height = obj.height; } if (obj.width) { kendowindOption.width = obj.width; } if (obj.title) { kendowindOption.title = obj.title; } } return kendowindOption; }, showDialog: function (obj) { var dialogid = "dialog" + dialogCount; var dialogFilter = "#" + dialogid; if ($(dialogFilter) == undefined || $(dialogFilter).length === 0) $("body").append('<div id="' + dialogid + '"></div>'); var instance = $(dialogFilter).data("kendoWindow"); if (instance == undefined) { var kendowindOption = this.initOption(obj); $(dialogFilter).kendoWindow(kendowindOption); } var dfd = $.Deferred(); instance = $(dialogFilter).data("kendoWindow"); instance.__dialog__ = { close: function () { dialogCount = dialogCount - 1; delete instance.__dialog__; instance.close(); $(dialogFilter).remove(); var args = arguments; if (args.length === 0) { dfd.resolve(); } else if (args.length === 1) { dfd.resolve(args[0]); } else { dfd.resolve.apply(dfd, args); } } }; dialogCount = dialogCount + 1; instance.center(); var url = obj.url; instance.refresh({ url: url }); instance.open(); return dfd.promise(); } };
新建一个index.html 页面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } </style> <title></title> <link href=http://www.mamicode.com/"http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />>新建page2.html 页面<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <button id="save">关闭</button> <script> $("#save").click(function () { var result = "sfasfasdf"; app.close($("#save").closest(".k-window-content").data("kendoWindow"), result); }); </script> </body> </html>
点击打开按钮效果如下:
点击关闭按钮
这个功能只是做了大概的,需要继续完善。kendo ui 中promise操作没有设计好。感觉用起来不是很爽
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。