码迷,mamicode.com
首页 > 其他好文 > 详细

[译]kendoui - 方法和事件

时间:2018-06-06 10:38:47      阅读:909      评论:0      收藏:0      [点我收藏+]

标签:cli   badge   events   basic   使用方法   handle   处理   intro   def   

原文

为了使用方法和事件,首先要获取到widget实例。

获取widget

一共有3种获取widget的方式。

jQuery的data方法

将widget的名作为参数传给jQuery的data方法。(widget都是jQuery插件)。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {
          // 创建widget实例
          $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

          // 获取widget实例
          var autoComplete = $("#animal").data("kendoAutoComplete");

          console.log(autoComplete);
        });
    </script>

getKendo* 方法

还可以使用getKendo<WidgetName>方法来获取widget。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {
          // 创建widget实例
          $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

          // 获取widget实例
          var autoComplete = $("#animal").getKendoAutoComplete();

          console.log(autoComplete);
        });
    </script>

The JavaScript Method Syntax

        <p>Animal: <input id="animal" /></p>

        <script>
            $(function() {
              $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

              var autoComplete = $("#animal").data("kendoAutoComplete");

              // focus the widget
              autoComplete.focus();
            });
        </script>

这不就是第一种方法吗???

处理widget事件

在初始化的时候绑定事件

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {

          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
              change: function(e) {
                console.log("change event handler");
              }
          });

        });
    </script>

在初始化之后去绑定事件

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {

          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
          });

          // ...

          var autocomplete = $("#animal").data("kendoAutoComplete");

          // 这种方式绑定的事件处理器,事件每次触发都会执行 
          autocomplete.bind("change", function(e) {
                console.log("change event handler");
          });

          // 这种方式绑定的事件处理器,只有事件首次被触发才会执行
          autocomplete.one("open", function(e) {
                console.log("open event handler");
          });

        });
    </script>

事件处理器参数

每个widget都会传递一个参数给事件处理器,这个参数被称为event object。所有的event object都有一个sender字段,它指向触发事件的widget实例。

不支持传递额外的自定义事件参数给事件处理器。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {

          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
              open: function(e) {
                var autocomplete = e.sender;
              }
          });

        });
    </script>

阻止事件

使用event objectpreventDefault()方法阻止事件。

    <p>Animal: <input id="animal" /></p>

    <script>
        $(function() {
          $("#animal").kendoAutoComplete({
              dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
          });

          var autoComplete = $("#animal").data("kendoAutoComplete");

          // prevent the autocomplete from opening the suggestions list
          autoComplete.bind('open', function(e) {
            e.preventDefault();
          });
        });
    </script>

解绑事件

为了解绑事件,要保持一个到事件处理器函数的引用,并将其传到unbind方法中去。如果调用unbind方法时没有传递任何参数,那么会解除所有这个事件的handler。

    <p>Animal: <input id="animal" /></p>

    <button id="unbindButton">Unbind event</button>

    <script>
        $(function() {
          var handler = function(e) { console.log(e); };
          $("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });

          var autoComplete = $("#animal").data("kendoAutoComplete");

          autoComplete.bind("open", handler);

          $("#unbindButton").on("click", function() {
              autoComplete.unbind("open", handler);
          });
        });
    </script>

限制

当直接调用方法时,对应的event不会触发。例如,如果通过API直接调用PanleBar的select方法,那么select事件不会被触发。

[译]kendoui - 方法和事件

标签:cli   badge   events   basic   使用方法   handle   处理   intro   def   

原文地址:https://www.cnblogs.com/irocker/p/kendo-events-and-methods.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!