原創(chuàng)|使用教程|編輯:龔雪|2019-09-23 10:20:36.070|閱讀 269 次
概述:本教程主要介紹如何使用Kendo UI通過繼承基本窗口小部件類為您提供創(chuàng)建自定義窗口小部件的選項,Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫,歡迎大家免費下載最新版!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。
Kendo UI通過繼承基本窗口小部件類為您提供創(chuàng)建自定義窗口小部件的選項。
1. 在kendo.ui命名空間中擴(kuò)展基本Kendo UI小部件類。
本示例演示如何創(chuàng)建變量來保存值,這些值也有助于縮小。 整個過程包含在一個自執(zhí)行的匿名函數(shù)中,以保護(hù)全局命名空間。 jQuery作為引用傳入,以確保$是jQuery。 小部件本身擴(kuò)展了基本小部件類,因此它被賦予了MyWidget的大寫名稱 - 或者小部件的名稱。 在使用JavaScript命名類而不是常規(guī)對象時,這通常被認(rèn)為是最佳實踐。
(function($) {// Shorten references to variables which is better for uglification. kendo = window.kendo,ui = kendo.ui,Widget = ui.Widget
var MyWidget = Widget.extend({
  // The initialization code goes here.
  });
})(jQuery);2. 為您的小部件提供init方法。 初始化窗口小部件時,框架會調(diào)用此方法。 這個init函數(shù)有兩個參數(shù),第一個是初始化窗口小部件的元素;第二個是您將很快指定的一組選項,這些將是配置值。
var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to initialize the widget.
  Widget.fn.init.call(this, element, options);
}
  });3. 如果要擴(kuò)展窗口小部件,對基礎(chǔ)的調(diào)用是將窗口小部件從聲明性初始化或標(biāo)準(zhǔn)命令式初始化轉(zhuǎn)換為合并所有基本選項和自定義選項的內(nèi)容。在init語句下聲明這些選項,您在選項對象中聲明的任何內(nèi)容都可供用戶作為配置值或數(shù)據(jù)屬性傳遞。
var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to initialize the widget.
  Widget.fn.init.call(this, element, options);
  },
options: {
  // The name is what it will appear as the kendo namespace(i.e. kendo.ui.MyWidget).
  // The jQuery plugin would be jQuery.fn.kendoMyWidget.
  name: "MyWidget",
  // Other options go here.
  ...
  }
});4. 將小部件添加到Kendo UI,以下示例演示了用于創(chuàng)建自定義Kendo UI窗口小部件,并使其像所有其他Kendo UI窗口小部件一樣可用的完整樣板。
(function($) {
// Shorten the references to variables. This is better for uglification var kendo = window.kendo,
  ui = kendo.ui,
  Widget = ui.Widget
var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to the widget initialization.
  Widget.fn.init.call(this, element, options);
},
options: {
  // The name is what it will appear as the kendo namespace(i.e. kendo.ui.MyWidget).
  // The jQuery plugin would be jQuery.fn.kendoMyWidget.
  name: "MyWidget",
  // Other options go here.
  ....
  }
});
ui.plugin(MyWidget);
})(jQuery);5. 要使此小部件支持DataSource或MVVM,請實現(xiàn)一些其他項,以下部分討論了創(chuàng)建DataSource-aware小部件的過程。本節(jié)演示的小部件是一個簡單的小部件,只重復(fù)數(shù)據(jù)源中的數(shù)據(jù),還允許您指定自己的自定義模板。 您可以將它視為一個非常笨拙的ListView,為了更容易處理,它被命名為Repeater。
要使窗口小部件識別數(shù)據(jù)源,請在數(shù)據(jù)源基礎(chǔ)對象上使用創(chuàng)建的便捷方法,代碼片段為您的窗口小部件初始化DataSource提供了靈活性。如果您實際在窗口小部件初始化或內(nèi)聯(lián)之外創(chuàng)建新的DataSource,則返回該DataSource。
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
6. 創(chuàng)建一個新的DataSource來綁定窗口小部件。此步驟不是必須的,因為您可以將DataSource設(shè)置為數(shù)組,如以下示例所示。 如果傳遞此數(shù)組,kendo.data.DataSource.create方法將根據(jù)此數(shù)組中的數(shù)據(jù)創(chuàng)建一個新的DataSource,并將其返回給that.dataSource。
$("#div").kendoRepeater({
dataSource: ["Item 1", "Item 2", "Item 3"]
});7. 通過內(nèi)聯(lián)指定其配置值來創(chuàng)建DataSource,如以下示例所示。 該示例指定了DataSource配置,但實際上并未創(chuàng)建DataSource實例。 kendo.data.DataSource.create(that.options.dataSource)獲取此配置對象并返回具有指定配置的新DataSource實例。
注意:要復(fù)制Kendo UI MultiSelect數(shù)據(jù)綁定操作,請顯式分配kendo.data.binders.widget.multiSelectCustom = kendo.data.binders.widget.multiselect; 捆綁。
$("#div").kendoRepeater({
dataSource: {
transport: {
read: {
url: "//mydomain/customers"
}
}
}
});掃描關(guān)注慧聚IT微信公眾號,及時獲取最新動態(tài)及最新資訊

本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)