1、基本使用

<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<div id="Login" style="display: none;">
<table>
<tr>
<td>UserName:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" /></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(function () {
$("#Login").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
modal: true
}); $("#Login").data("kendoWindow").title("User Login").center().open();
});
</script>

  效果预览:

  2、自定义动作

<script type="text/javascript">
$(function () {
$("#window").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions: [
"Custom",
"Minimize",
"Maximize",
"Close"
],
modal: true
}); $("#window").data("kendoWindow").center().wrapper.find(".k-i-custom").click(function (e) {
alert("Customizing Action");
e.preventDefault();
});
});
</script>

  效果预览:

  3、异步加载内容

<div id="window" style="display: none;"></div>
<script type="text/javascript">
$(function () {
$("#window").kendoWindow({
title: "Title",
width: 500,
height: 300,
content: "/Window/AjaxContent.html",
modal: true
}); $("#window").data("kendoWindow").center().open();
});
</script>

  4、常用事件

<script type="text/javascript">
$(function () {
var onClose = function () {
alert("Close");
}
var onOpen = function () {
alert("Open");
}
var onRefresh = function () {
alert("Refresh");
}
$("#window").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions:["Refresh","Close"],
content: "/Window/AjaxContent",
open: onOpen,
close: onClose,
refresh:onRefresh,
modal: true
}); $("#window").data("kendoWindow").center().open();
});
</script>

  5、参考资料

  http://demos.telerik.com/kendo-ui/window/index

最新文章

  1. 在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD(二)
  2. jquery 杂记
  3. SpringMVC Mybatis Shiro RestTemplate的实现客户端无状态验证及访问控制【转】
  4. Lua小技巧
  5. sublime Text 的安装、破解、汉化、使用
  6. 开发笔记:用Owin Host实现脱离IIS跑Web API单元测试
  7. javascript模板库jsrender加载并缓存外部模板文件
  8. C#操作符??和?:
  9. 【leetcode】Edit Distance (hard)
  10. Linux 删除文件后空间不释放磁盘空间
  11. html5 web worker
  12. NYOJ 105 其余9个
  13. bean的单例
  14. ACM Meteor Shower
  15. 【数学建模】【APIO2015】Palembang Bridges
  16. IP包头结构详解
  17. 单机千万级MQTT连接服务器测试报告
  18. Codeforces1065G Fibonacci Suffix 【递推】【二分答案】
  19. 种花 [JZOJ4726] [可撤销贪心]
  20. json和数组的区别

热门文章

  1. [UCSD白板题] Compute the Edit Distance Between Two Strings
  2. jQuery中$.fn的用法
  3. Ms - Sql 定位附近的人
  4. Java学习笔记(五)
  5. mysql 条件统计
  6. ubuntu常用配置
  7. 如何利用Github+Appveyor+Nuget打造自己的.net core开源库
  8. ddms(基于 Express 的表单管理系统)源码学习
  9. Java多线程9:ThreadLocal源码剖析
  10. 作业三(代码规范、代码复审、PSP)