0

在drupal中，我生成了一个列表，其中每个项目都是一个可折叠的字段集，可以包含额外的信息。

由于列表相当大，我想避免在用户单击字段集之前加载额外信息。

最佳情况：

用户单击折叠的字段集。Fieldset 加载额外的信息。字段集展开。

我已经将 collapse.js 的副本复制并加载到我的表单中，但是我对 js 和 jQuery 很陌生，所以我有点迷茫。如果有人能告诉我如何在第一次扩展字段集时调用一个函数，我相信我能弄清楚其余的。

我已经包含了来自 collapse.js 的代码：

(function ($) {

//Toggle the visibility of a fieldset using smooth animations.
Drupal.toggleFieldset = function (fieldset) {
  var $fieldset = $(fieldset);
   if ($fieldset.is('.collapsed')) {
    var $content = $('> .fieldset-wrapper', fieldset).hide();
    $fieldset
      .removeClass('collapsed')
      .trigger({ type: 'collapsed', value: false })
      .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
    $content.slideDown({
      duration: 'fast',
      easing: 'linear',
      complete: function () {
        Drupal.collapseScrollIntoView(fieldset);
        fieldset.animating = false;
      },
      step: function () {
        // Scroll the fieldset into view.
        Drupal.collapseScrollIntoView(fieldset);
      } 
    });
  }
  else {
    $fieldset.trigger({ type: 'collapsed', value: true });
    $('> .fieldset-wrapper', fieldset).slideUp('fast', function () {
      $fieldset
        .addClass('collapsed')
        .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
       fieldset.animating = false;
    });
  }
};

//Scroll a given fieldset into view as much as possible.
Drupal.collapseScrollIntoView = function (node) {
  var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
  var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
  var posY = $(node).offset().top;
  var fudge = 55;
  if (posY + node.offsetHeight + fudge > h + offset) {
    if (node.offsetHeight > h) {
      window.scrollTo(0, posY);
    }
    else {
      window.scrollTo(0, posY + node.offsetHeight - h + fudge);
    }
  }
};

Drupal.behaviors.collapse = {
  attach: function (context, settings) {
    $('fieldset.collapsible', context).once('collapse', function () {
      var $fieldset = $(this);
      // Expand fieldset if there are errors inside, or if it contains an
      // element that is targeted by the uri fragment identifier. 
      var anchor = location.hash && location.hash != '#' ? ', ' + location.hash : '';
      if ($('.error' + anchor, $fieldset).length) {
        $fieldset.removeClass('collapsed');
      }

      var summary = $('<span class="summary"></span>');
      $fieldset.
        bind('summaryUpdated', function () {
          var text = $.trim($fieldset.drupalGetSummary());
           summary.html(text ? ' (' + text + ')' : '');
        })
        .trigger('summaryUpdated');

      // Turn the legend into a clickable link, but retain span.fieldset-legend
      // for CSS positioning.
      var $legend = $('> legend .fieldset-legend', this);

      $('<span class="fieldset-legend-prefix element-invisible"></span>')
        .append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
        .prependTo($legend)
        .after(' ');

      // .wrapInner() does not retain bound events.
      var $link = $('<a class="fieldset-title" href="#"></a>')
        .prepend($legend.contents())
        .appendTo($legend)
        .click(function () {
          var fieldset = $fieldset.get(0);
          // Don't animate multiple times.
          if (!fieldset.animating) {
            fieldset.animating = true;
            Drupal.toggleFieldset(fieldset);
          }
          return false;
        });

       $legend.append(summary);
    });
  }
};

})(jQuery);
4

1 回答 1

0

在我看来，您必须重写整个Drupal.toggleFieldset函数（就像您重写 Drupal 主题函数时一样。

您也许可以在 FormAPI 的字段集中添加一个类，然后在参数complete函数中捕获它$content.slideDown并触发您的自定义函数，以添加“加载”图形并发出您的 ajax 请求。

我从您的问题中假设您对 FormAPI/jQuery.ajax() 足够熟悉，可以尝试一下。但如果不是，请告诉我，我将包含一些片段

编辑

这是一些示例代码，为此设置测试环境需要相当长的时间，所以它只是一个指针（不能为此创建 JS fiddle ;)）

您可以在 PHP 中添加这样的字段集

$form['my_fieldset'] = array(
  '#type' = 'fieldset',
  '#title' = t('My fieldset'),
  '#collapsible' = true,
  '#collapsed' = true,
  '#attributes' => array(
    'class' => array('ajax-fieldset'),
    'rel' => 'callback/url/path' // random attribute to store the link to a menu path that will return your HTML
  )
);
$form['my_fieldset'] = array(
  '#markup' => '<div class="response">loading...</div>'
);

您显然还会设置一个菜单挂钩，返回您的主题数据@callback/url/path。IMO 最好返回 JSON 数据并使用 JS 模板对其进行主题化，但 Drupal 方式（至少目前）似乎是在菜单挂钩回调函数中呈现 HTML。

然后这里是JS。我只包含了更改后的完整功能，而不是复制您粘贴的内容。将完整功能添加到代码副本中，在您自己的 JS 文件中重新指定核心 Drupal 功能

$content.slideDown({
  complete: function () {
    Drupal.collapseScrollIntoView(fieldset);
    fieldset.animating = false;
    if($fieldset.hasClass('ajax-fieldset')) {
      $.get(
        Drupal.settings.basePath + $fielset.attr('rel'),
        function(data) {
          $fieldset.find('.response').html(data);
        }
      )
    }
  }
});

或者，而不是搞乱可折叠功能。只需创建没有可折叠/折叠类的自己的字段集，然后自己从头开始实现

....所以..类似的东西:)

于 2012-08-25T14:58:12.377 回答