KendoUI系列：Window

最新推荐文章于 2020-09-25 17:21:03 发布

weixin_34376986

最新推荐文章于 2020-09-25 17:21:03 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/libingql/p/3803526.html

本文将介绍Kendo UI Window控件的基本使用、自定义动作、异步加载内容和常用事件，包括如何实现自定义操作、异步加载页面内容及触发事件等核心功能。

　　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>