#statesを使用してSlideDownを実行するにはどうすればよいですか？

7

（Relationモジュールの） "#states"を使用するフォームがあり、それは機能しますが、ジャンプするようなものです。素敵なSlideDownの方がはるかに優れています。

表示するだけでなく、どうすればよいですか？

javascript

— キアムラルノ
ソース

これも知りたいです。オプションが選択されたときにフォームが突然変化するのではなく、遷移を簡単に定義した方がいいでしょう。

— geerlingguy '09 / 09/23

2

Mikeの投稿に基づいて作成した上記のコードでは、要素が下向きになるだけで、再び元に戻ることはありません。上下にスライドさせるために、e.stopPropagation（）;を追加しました。したがって、完全なコードは次のとおりです。

jQuery(document).ready(function($) {
    $('form.slide').bind('state:visible', function(e) {
        if(e.trigger) {
            $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'slideDown' : 'slideUp']();
            e.stopPropagation();
        }
    });
});

— フェリックスイブ
ソース

10

可視状態を使用していると思いますか？

これを行うコードは、states.jsにあります。

$(document).bind('state:visible', function(e) {
    if (e.trigger) {
      $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'show' : 'hide']();
    }
  });

ご覧のように、構成可能なパラメーターなしでshow / hideを呼び出します。つまり、簡単に変更することはできません。

ただし、そのブロックの上のコメントは興味深いものです。

/**
 * Global state change handlers. These are bound to "document" to cover all
 * elements whose state changes. Events sent to elements within the page
 * bubble up to these handlers. We use this system so that themes and modules
 * can override these state change handlers for particular parts of a page.
 */

私がこれを正しく理解している場合は、次のようなものを追加することで、特定のページ要素（フォームや単一のフォーム要素など）のイベントハンドラーをオーバーライドできます。

$('form.your-form-class').bind('state:visible', function(e) {
  if (e.trigger) {
    $(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'slideDown' : 'slideUp']();
  }
});

イベントがDOMツリーでさらにバブルアップしないようにするには、FALSEを返す必要があると思います。

— ベルディル
ソース

美しく働いた！あなたは交換してください（私はお勧めしませんこれは）このインラインをやっている場合$でのjQueryラップでdrupal_add_js("[Berdir's code here]", array('type' => 'inline', 'scope' => 'footer'));

— ジョシュアStewardson

誰かがこれを更新して、の.on()代わりに新しいjquerysでも動作するようにできればすばらしいでしょう.bind()。

— Letharion 2013

document.readyイベントには反応しないでください。drupal動作を使用する必要があります。

— アーロンバウマン2014年

0

Berdirの投稿に基づいて、私はそれを微調整してカスタムモジュールで動作させることができました。

したがって、私の.moduleファイルでは、この行をhook_init（）関数の下に追加しました

function er_init(){
    drupal_add_js('custom.js'); 
}

次に、custom.jsファイルで、

jQuery(document).ready(function(){
  jQuery('form#user-profile-form').bind('state:visible', function(e) {
    if (e.trigger) {
      jQuery(e.target).closest('.form-item, .form-submit, .form-wrapper')[e.value ? 'fadeIn' : 'fadeOut']();
    }
});

}）

もちろん、この場合、それはユーザープロファイルにのみ適用されます。

— mikeDOTexe
ソース