Widget element and wrapper

 

本文章示範一個 widget 的 element 屬性與 wrapper 屬性之不同

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="myWindow">...window content...</div>
    <script>
        // Initialize the widget which also returns the widget element.
        var winElement1 = $("#myWindow").kendoWindow({ /*...*/ }); // Returns div#myWindow as a jQuery object.

        // Other ways to get the widget element.
        var winElement2 = $("#myWindow");
        var winElement3 = $("#myWindow").data("kendoWindow").element; // Returns div#myWindow as a jQuery object.

        // Get the wrapper.
        var winWrapper1 = $("#myWindow").data("kendoWindow").wrapper; // Returns div.k-window as a jQuery object.    
    </script>
</body>

</html>

說明:

1、一個 widget 的 element 屬性會指向 kendo widget 化前的元素

 

2、一個 widget 的 wrapper 屬性永遠指向一 widget 元素的最外圍

 

參考資料:

Widget DOM Element Structure

kendo.ui.Widget