Kendo UI for jQuery使用教程：自定义小部件（一）

Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。

Kendo UI通过继承基本窗口小部件类为您提供创建自定义窗口小部件的选项。

 

 

入门

1. 在kendo.ui命名空间中扩展基本Kendo UI小部件类。

本示例演示如何创建变量来保存值，这些值也有助于缩小。整个过程包含在一个自执行的匿名函数中，以保护全局命名空间。 jQuery作为引用传入，以确保$是jQuery。 小部件本身扩展了基本小部件类，因此它被赋予了MyWidget的大写名称 – 或者小部件的名称。

(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方法。 初始化窗口小部件时，框架会调用此方法。 这个init函数有两个参数，第一个是初始化窗口小部件的元素；第二个是您将很快指定的一组选项，这些将是配置值。

var MyWidget = Widget.extend({

init: function(element, options) {

// The base call to initialize the widget.
Widget.fn.init.call(this, element, options);

}
});

 

3. 如果要扩展窗口小部件，对基础的调用是将窗口小部件从声明性初始化或标准命令式初始化转换为合并所有基本选项和自定义选项的内容。在init语句下声明这些选项，您在选项对象中声明的任何内容都可供用户作为配置值或数据属性传递。

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，以下示例演示了用于创建自定义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 widgetinitialization.
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，请实现一些其他项，以下部分讨论了创建DataSource-aware小部件的过程。本节演示的小部件是一个简单的小部件，只重复数据源中的数据，还允许您指定自己的自定义模板。您可以将它视为一个非常笨拙的ListView，为了更容易处理，它被命名为Repeater。

要使窗口小部件识别数据源，请在数据源基础对象上使用创建的便捷方法，代码片段为您的窗口小部件初始化DataSource提供了灵活性。如果您实际在窗口小部件初始化或内联之外创建新的DataSource，则返回该DataSource。

that.dataSource =kendo.data.DataSource.create(that.options.dataSource);

 

6. 创建一个新的DataSource来绑定窗口小部件。此步骤不是必须的，因为您可以将DataSource设置为数组，如以下示例所示。如果传递此数组，kendo.data.DataSource.create方法将根据此数组中的数据创建一个新的DataSource，并将其返回给that.dataSource。

$("#div").kendoRepeater({
dataSource: ["Item 1", "Item 2", "Item 3"]
});

 

7. 通过内联指定其配置值来创建DataSource，如以下示例所示。该示例指定了DataSource配置，但实际上并未创建DataSource实例。 kendo.data.DataSource.create（that.options.dataSource）获取此配置对象并返回具有指定配置的新DataSource实例。

注意：要复制Kendo UI MultiSelect数据绑定操作，请显式分配kendo.data.binders.widget.multiSelectCustom= kendo.data.binders.widget.multiselect; 捆绑。

$("#div").kendoRepeater({
dataSource: {
transport: {
read: {
url: "http://mydomain/customers"
}
}
}
});