0

剣道UIでカスタムコントロールを作成するには? たとえば、剣道にはオートコンプリート コントロールがあります。
それを使用して、剣道が提供するすべてのイベントといくつかの外部イベントを使用して、独自の「myAutoComplete」を作成したいと考えています。

その理由は、剣道の種目は非常に限られているからです。
AutoComplete 剣道提供 (変更、閉じる、dataBound、フィルタリング、開く、選択) の場合、そのようなもの (onKeyPress、onMouseOver など) にいくつかのイベントを追加したいと思います。

例えば：

私の要件:

    $("#autocomplete").myKendoAutoComplete({
      change: function(e) {
        var value = this.value();
        // Use the value of the widget
      },
     onMouseOver: function() {},
     onKeyPress: function() {}
  });

剣道提供：

 $("#autocomplete").kendoAutoComplete({
          change: function(e) {
            var value = this.value();
            // Use the value of the widget
          }
        });

これを達成するために誰か助けてください。

4

2 に答える 2

1

jQuery イベント処理と同様に、イベント (onKeyPress、onMouseOver など) を kendo-ui オートコンプリート テキスト ボックスにバインドすることもできます。

HTML:

 <input id="countries" />

JavaScript:

$(document).ready(function () {
     var data = ["Paris","Barcelona","Tokyo","New-York","Berck"];

    $("#countries").kendoAutoComplete({
        dataSource: data,
        filter: "startswith",
        placeholder: "Select country...",
        separator: ", "
    })
    .keypress(function(e) {
        console.log(e);
        console.log(e.keyCode);
    })
    .mouseover(function(e) {   
        console.log(this.value);   
    });
});

このJSFiddleを参照してください

于 2016-02-01T11:53:50.593 に答える
1

テンプレートやイベントで独自のウィジェットを作成できる「Kendo Custom Widgets」を使用できます。

例を示しました。ニーズに応じて使用できます。

$(function() {
  (function($) { 
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,

    var MyKendoAutoComplete = Widget.extend({
      init: function(element, options) {
        var that = this;
        Widget.fn.init.call(that, element, options);      
        that._create();
      },
      options: {
        name: "MyKendoAutoComplete",


        onMouseOver: function(e) {
          alert(e.sender.value());
        },
        onKeyPress: function(e) {
          alert(e.sender.value());
        }
      },
      _create: function() {
        var that = this;

         // here you will bind your events 

        kendo.bind(that.element, that.options);
      },
      _templates: {
        //you can create your own templates 

      }
    });

    ui.plugin(MyKendoAutoComplete);
  })(jQuery);

  $('#autocomplete').kendoMyKendoAutoComplete();
});

ここでもっと見ることができます：

http://docs.telerik.com/KENDO-UI/intro/widget-basics/create-custom-kendo-widget

この助けを願っています

于 2016-02-01T11:58:38.850 に答える