Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應用程序的完整UI庫。

您可以通過數(shù)據(jù)屬性或基于自定義HTML屬性初始化和配置每個Kendo UI小部件。

Kendo UI混合應用程序、單頁面應用程序（SPA）視圖組件和模型視圖視圖模型（MVVM）kendo.bind方法使用聲明性方法自動實例化現(xiàn)有DOM元素中的多個小部件。

使用數(shù)據(jù)屬性

當頁面上有許多Kendo UI小部件時，從數(shù)據(jù)屬性初始化很方便，因為小部件配置是在目標元素中聲明的。

以下示例演示如何使用數(shù)據(jù)屬性初始化Kendo UI窗口小部件。 kendo.bind（$（“＃container”））語句查找具有角色數(shù)據(jù)屬性的所有元素，并初始化相應的Kendo UI小部件。

注意：角色數(shù)據(jù)屬性的值是窗口小部件的小寫名稱 – "autocomplete"、"dropdownlist"等。

在混合應用程序中初始化

您可以從混合應用程序和給定元素中的數(shù)據(jù)屬性初始化窗口小部件，然后還可以配置data- *選項。 默認情況下為避免歧義，kendo.bind僅初始化kendo.ui命名空間中的小部件，不包括混合小部件?？梢酝ㄟ^將其他名稱空間作為參數(shù)傳遞來更改此操作。請注意混合Kendo UI應用程序首先從kendo.mobile.ui命名空間初始化小部件。這意味著具有data-role =“listview”的元素將自動初始化為混合應用程序上下文中的混合ListView小部件。

注意：data-role屬性還接受完整窗口小部件類名稱（帶有其名稱空間）作為值。

以下示例演示如何使用窗口小部件的完整類路徑在混合應用程序中實例化Kendo UI ListView。

在特定元素中初始化

以下示例演示如何在特定元素中實例化Kendo UI小部件。

設置數(shù)據(jù)選項

可以使用target元素的data屬性設置每個配置選項。將“data-”前綴添加到配置選項的名稱并指定選項值 – 例如，data-delay =“100”。

注意：camelCase選項通過破折號分隔的屬性設置。例如，AutoComplete的ignoreCase選項通過data-ignore-case設置。

以數(shù)據(jù)開頭的選項不需要屬性名稱中的附加“數(shù)據(jù)”。例如，dataTextField選項通過data-text-field屬性設置，dataSource通過data-source屬性設置。 復雜配置選項設置為JavaScript對象文字 – 例如，data-source =“{data：[{name：’John Doe’}，{name：’Jane Doe’}]}”。

以下示例演示如何使用數(shù)據(jù)屬性配置Kendo UI小部件。

訂閱事件

您可以使用數(shù)據(jù)屬性訂閱Kendo UI小部件事件。 data屬性的值被解析為JavaScript函數(shù)，可在全局范圍內(nèi)使用。以下示例演示如何通過數(shù)據(jù)屬性訂閱KendoUI窗口小部件事件。