KendoUI系列：Window

libingql發表於2014-06-23
UI

　　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

相關文章