Kendo UI for jQuery自定义小部件第一弹！不得不看的入门指南

Kendo UI for jQuery最新试用版下载

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

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

入门

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

本示例演示如何建立变量来保存值，这些值也有助于缩小。 整个过程包含在一个自执行的匿名函数中，以保护全局命名空间。 jQuery做为引用传入，以确保$是jQuery。 小部件自己扩展了基本小部件类，所以它被赋予了MyWidget的大写名称 - 或者小部件的名称。 在使用JavaScript命名类而不是常规对象时，这一般被认为是最佳实践。

(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 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，请实现一些其余项，如下部分讨论了建立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"
}
}
}
});

---

Kendo UI R3 2019全新发布，最新动态请持续关注Telerik中文网！

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯