<!DOCTYPE html>
<html>
<head>
<title>使用Deferred建立自訂確認對話框(Kendo UI版)</title>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css"
rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>
<meta charset=utf-8 />
<style>
.cnfrm-msg { color: red; padding: 12px; font-size: 12pt; }
.cnfrm-yes,.cnfrm-no { }
</style>
<script>
//參考: http://jsfiddle.net/gyoshev/HRcKK/
(function($) {
var h = [];
h.push("<div class='cnfrm-block'>");
h.push("<div class='cnfrm-msg'></div>");
h.push("<input type='button' class='cnfrm-yes' />");
h.push("<input type='button' class='cnfrm-no' />");
h.push("</div>");
var html = h.join("");
$.kendoConfirm = function(title, msg, yesText, noText) {
var $div = $(html);
$div.find(".cnfrm-msg").text(msg);
$div.find(".cnfrm-yes").val(yesText || "Yes");
$div.find(".cnfrm-no").val(noText || "No");
var win = $div.kendoWindow({
title: title || "Confirmation",
resizable: false,
modal: true,
deactivate: function() {
this.destroy(); //remove itself after close
}
}).data("kendoWindow");
win.center().open();
var dfd = $.Deferred();
$div.find(":button").click(function() {
win.close();
if (this.className == "cnfrm-yes")
dfd.resolve();
else
dfd.reject();
});
return dfd.promise();
};
})(jQuery);
$(function() {
$("#btnTest").click(function() {
var dfd =
$.kendoConfirm(
"Please confirm...",
"Are you sure to delete it?",
"Yeeees", "No no no");
dfd.done(function() { //按下Yes時
alert("You are sure");
})
.fail(function() { //按下No時
alert("You are not sure");
});
});
});
</script>
</head>
<body>
<input type='button' value='Test' id='btnTest' />
<div class='dialog' style='display:none'>
<div style='border: 1px solid blue; padding: 12px;'>
<span class='m'></span>
<input type='button' value='Yes' />
<input type='button' value='No' />
</div>
</div>
</body>
</html>