新建一个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://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="appdialog.js"></script>
</head>
<body>
<button id="open">打开窗口</button>
<script>
$(function () {
initOpenBtn();
});
function initOpenBtn() {
$("#open").click(function () {
var obj = { url: "page2.html" };
app.showDialog(obj).then(function (result) {
if (result) {
alert(result);
console.log(result);
}
});
});
}
</script>
</body>
</html>
新建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操作没有设计好。感觉用起来不是很爽
利用kendo ui window创建自己的promise window
时间： 2024-10-03 20:02:54