0

drupalで、各アイテムが折りたたみ可能なフィールドセットであるリストを生成しました。これには、追加情報を含めることができます。

リストがかなり大きいため、ユーザーがフィールドセットをクリックするまで余分な情報をロードしないようにします。

最良のシナリオ：

ユーザーが折りたたまれたフィールドセットをクリックします。フィールドセットは追加情報をロードします。フィールドセットが折りたたまれません。

私は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のフィールドセットにクラスを追加し、それをparamsのcomplete関数でキャッチして$content.slideDown、自分のカスタム関数を起動し、「読み込み中」のグラフィックを追加してajaxリクエストを作成することもできます。

あなたの質問から、あなたはFormAPI / jQuery.ajax（）に精通していると思います。しかし、そうでない場合は私に知らせてください、そして私はいくつかのスニペットを含めます

編集

ここにいくつかのサンプルコードがあります。これのテスト環境をセットアップするのにかなり時間がかかるので、それは単なるポインタです（このためのJSフィドルを作成することはできません;））

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 に答える