KendoUI系列：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",
             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",
             500,
            height: 300,
            actions: [
                "Custom",
                "Minimize",
                "Maximize",
                "Close"
            ],
            modal: true
        });

        $"#window").data"kendoWindow").center).wrapper.find".k-i-custom").clickfunction e) {
            alert"Customizing Action");
            e.preventDefault);
        });
    });
</script>

　　效果预览：

　　3、异步加载内容

<div id="window" style="display: none;"></div>

<script type="text/javascript">
    $function ) {
        $"#window").kendoWindow{
            title: "Title",
             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",
             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