需要帮助将 jQuery 事件转换为 Drupal 行为答案

【问题标题】：Need help Converting a jQuery event to a Drupal Behavior需要帮助将 jQuery 事件转换为 Drupal 行为
【发布时间】：2015-07-17 03:55:00
【问题描述】：

我有一个 Drupal 7 网站，它使用 jQuery 动画来淡入 div 标签。我需要一个事件来在完成时捕获淡入。我找到了一个示例 jQuery 示例，它可以满足我的需要，但我无法成功地将其转换为 Drupal 7 行为，我不太确定我可能会丢失什么。

Fiddle Example

下面是我的 Drupal JS 文件，fadeInEvent.js。

Drupal.behaviors.fadeInEvent= {
    attach: function (context, settings) {

        var _old = jQuery.fn.fadeIn;

        jQuery.fn.fadeIn = function() {
            var self = this;
            _old.apply(this.arguments).promise().done(function(){
                self.trigger('fadeIn');
            });
        };

        jQuery('.tab-pane').bind('fadeIn', function() {
             alert('fadeIn Done.');
        });

    }
};

在上面的 JS 代码中，我从来没有收到我选择的项目上的淡入已完成的警报。

【问题讨论】：

标签： javascript jquery drupal-7

【解决方案1】：

首先，在noconflict 模式下使用jQuery 时，您可以使用闭包通过$ 访问它

(function($) {
    // jQuery code using $ object.
}(jQuery));

关于.fadeIn()，考虑一下我的sn-p：

/**
 * $.fn.fadeInNew plugin for triggering 'fadeInDone', when .fadeIn is done.
 *
 * @param speed
 * @param easing
 * @param callback
 * @returns {$.fn}
 */
$.fn.fadeInNew = function(speed, easing, callback) {

  var self = this;

  self.animate({
    opacity: "show"
  }, speed, easing, function() {
    self.trigger('fadeInDone');

    if ($.isFunction(callback)) {
      callback.apply(self);
    }
  });

  return self;
}

$('.tab-pane').on('fadeInDone', function() {
  alert('Alarm!');
});

$('.button').on('click', function(e) {
  $('.tab-pane').fadeInNew();
});

.tab-pane {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">Have a good day!</div>
<button class="button">Show something!</button>

由于我不太喜欢覆盖任何库的本机方法的想法，因此我制作了一个插件.fadeInNew()，它将触发元素上的自定义fadeInDone 事件。动画背后的代码与原生实现中的代码几乎相同 see the source here。

另外，您不需要使用Drupal.behaviors 来定义类似的东西。您应该仅将 attach 用于使用 Drupal 的 ajax 框架加载的内容，请参阅 includes/ajax.php

【讨论】：