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",

            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