2

フリッピープラグインでjqueryのモーダルダイアログを反転させてみました

ダイアログを作成するための私のコード：

$(document).ready(function(){
  [...]
  $('<div class="modal-popup"><div>TEST</div></div>')
            .hide() // Hide the dialog for now so we prevent flicker
            .appendTo(document.body)
            .filter('div') // Filter for the div tag only, script tags could surface
            .dialog({ // Create the jQuery UI dialog
                create: function () {
                   $(this).parent().wrap('<div class="flip" style="border:1px solid red;position:relative;z-index:50000;" />');
                },
                title: link.data('dialog-title'),
                dialogClass: "dialog_shadow",
                modal: true,
                resizable: false,
                draggable: true,
                show: { effect: 'fade', duration: 250 },
                hide: { effect: 'fade', duration: 400 },
                width: 'auto',
                beforeClose: function () {
                    resetForm($(this).find('form'));
                    $('input[type=submit]').css('cursor', 'hand');
                }                       
            })
            .end();
   });

ダイアログが表示され、リンクをクリックすると、ダイアログが反転し、次のコードで同じコンテンツが表示されます。

                $('.popCallActionRegister > a').click(function (e) {
                    e.preventDefault();

                    var content = $('div.flip').html(); // ModalDialog -> div.ui-dialog all html

                    $('div.flip').flippy({
                        verso: content,
                        direction: "LEFT",
                        duration: "250"
                    });
                });

それは非常にうまく機能しますが、コンテンツ内のすべての Javascript を失い、ダイアログをドラッグできません。呼び出し ajax が新しい反転コンテンツで機能しません

JavaScript を有効にするにはどうすればよいですか? 同じ内容なのにめくるだけだから…それだけです。

アップデート ：

HERE jsFiddle

このソリューションは、以下の提案を統合します

どんな助けでも大歓迎です！

4

2 に答える 2

3

jQuery イベントは、既存の要素にのみ関連付けることができます。あなたのhtmlが何であるか、そしてあなたが達成したいことについていくつかの仮定をしたので、間違っているかもしれませんが、これを行うと：

var content = $('div.flip').html();

div に添付されたイベントではなく、div のコンテンツをコピーしています。したがって、「javascriptを無効にする」のではなく、イベントが添付されていない新しい要素を作成しているだけです。代わりにこれを試してください：

var content = $('div.flip').clone(true, true);

これにより、要素とすべてのイベントがコピーされるはずですが、フリップ プラグインの舞台裏で何が起こっているのかわからないため、機能しない可能性があります。

jQuery UI のモーダルを使用していない場合は、jQuery から .on() を使用してイベントをアタッチするか、flip プラグインから onReverseFinish コールバックを使用してすべてのイベントを再度アタッチするように指示します。

編集1

わかりました、フリッピー プラグインを調べましたが、その動作方法が jQuery UI ダイアログと競合しており、プラグインのソースを編集せずにそれらを連携させる方法が見つかりませんでした。フリッピーは、コンテナーの Y 軸を 90 度にアニメーション化し、コンテナーの内部にあるものを削除し、「verso」パラメーターとして指定したものに置き換えることでコンテンツを交換し、アニメーション化して 0 に戻します。問題は、ダイアログ要素が削除されると、 jQuery UI はメソッドを実行して、ダイアログ ウィジェットへのすべての参照をクリアします (オーバーレイも消えていることがわかります)。

私の提案は、より柔軟なプラグインを見つけるか、使用しているプラ​​グインを編集することです. フリップボックスのコンテンツを削除する代わりに、表示プロパティを切り替えるだけでなく、コンテンツを 2 つのサブコンテナーに分割します。たとえば、コンテンツを分割します。

<div class="flipbox">
    <div class="ui-dialog whatever">
        <div class="toggle_me">Content 1 - front</div>
        <div class="toggle_me" style="display:none;">Content 2 - back</div>
    </div>
</div>

プラグインの次の部分を見つけます。

this.jO.empty().append(this._Verso);

そして、次のように変更します。

this.jO.find('.toggle_me').toggle();
于 2013-08-09T01:41:34.357 に答える