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