0

更新：問題を示すJSFIDDLEです

http://jsfiddle.net/JPqhz/1/

github のファイル ブラウザに似たようなことをしようとしています。

https://github.com/mitsuhiko/flask

(フォルダをクリックしてデモを行います。唯一の違いは、私が必要としているのはショーに適した「スライド」であるということです。)

いくつかのjsonを返し、divを置き換えるために使用されるajax呼び出しがあります。私はそれをほとんど機能させていますが、次の目的で使用するjqueryがわかりません：

  1. hide() jqueryUI の「スライド」効果に置き換えたい既存の div
  2. replaceWith を使用してコンテンツを置き換えます (さまざまな理由で html() を使用できません)、replaceWith() である必要がありますが、非表示のままにしておきます
  3. いくつかの jquery ビヘイビアを新しいコンテンツに再アタッチします (このコードは Drupal 固有ですが、ワンライナーです。他の jquery ビヘイビアを新しいコンテンツに再アタッチします)。コンテンツはまだ非表示です。
  4. show() jqueryUI の「スライド」効果を持つ新しい div

私は多くの異なることを試しました。私は ajax が非同期であることを知っているので、これをコールバックで実行するか、動作をチェーンする必要があります。これまでのところ、私はこれまでです：

/* this snippet occurs in an $.ajax success: function, argumentWrapper is the div
wrapper to replace, newContent is the new html that will be inserted */

argumentWrapper.hide({
    effect: 'slide',
    direction: 'left',
    complete: function() {
         argumentWrapper.replaceWith(function() {
              return $(newContent).hide({
                   complete: function(){
                        Drupal.attachBehaviors(newContent);
                   }
              }).show({
                   effect: 'slide',
                   direction: 'right'
              });
         });
    }
});

これはほとんど機能しますが、スライドして戻る前に、奇妙な「束ねる」効果が得られます. 左側に非常に div がある一時停止のように。

更新：問題を示すJSFIDDLEです

http://jsfiddle.net/JPqhz/1/

4

1 に答える 1

0

コンテナを使用してコンテンツをラップする場合の解決策の 1 つを次に示します。(freenode #jquery の chinoto へのクレジット):

http://jsfiddle.net/JPqhz/7/

   var
    $container=$('#container')
    ,wrapper = $("#wrapper")
    ,newContent = '<div id="dynamic">This is new information<div class="clickme"></div></div>';


$container.on('click','.clickme',function(event) {
    $container.hide({
        effect: 'slide',
        direction: 'left',
        complete: function () {
            (function() { //put me in post function
                wrapper.html(newContent);
                //Drupal reattach behaviors goes here
                $container.show({
                    effect: 'slide',
                    direction: 'right'
                });
            })()
        }
    });

});
于 2013-06-12T17:53:15.650 に答える