1

私は以前にいくつかのポップアップ/ダイアログを実行しましたが、() で回帰エラーが発生し、DIV/ポップアップ/ダイアログに JQuery を使用するように再コーディングしたいと考えています。Jquery への移行は、ポップアップが他の要素の上に配置される単なる DIV である場合はできない、ダイアログ/ポップアップの再配置とサイズ変更を有効にできるため、利点になります。

ポップアップ/ダイアログ/DIVをJQueryで表示する「最良の」方法は何だろうか？プラグインを追加せず、基本的な JQuery ファイルのみを含めたいと思います。方法を教えていただけますか？

現在のページはポップアップのようなものを作成しますが、位置を変更することはできません。

4

2 に答える 2

2

.popupこれを行う方法は、ポップアップの基本的なレイアウト機能を含むクラスを作成することです。次に、このクラスを<div>ページ上部の非表示に追加します。

次に、ポップアップが必要な場合は、jQueryの属性draggableと属性をそれに付けます。resizableその後、.get()ポップアップ コンテンツ専用のページからのリクエストでポップアップのコンテンツをロードしてから、それをロードし.show()ます。

例

CSS

.popup 
{
    display:none;
    position:absolute;
    // some other nice styling features
}

HTML

<body>
<div class='popup'></div>
...
page content
...
</body>

Javascript

function popup(){
    // for the draggable you may want to specify the drag handle like only the title of the popup
    var popup = $('.popup');

    popup.draggable();
    popup.resizable();

    $.get('/getPopup.php?action=theKindOfPopupRequested', function(data) {        
        popup.html(data);
        popup.show('fast');
    });
}

ソース:

http://jqueryui.com/demos/resizable/

http://jqueryui.com/demos/draggable/

于 2012-06-15T09:17:50.333 に答える
1

初歩的なダイアログ プラグインを次に示します。

http://jsfiddle.net/pjUUQ/

(function($) {
    var dialogHTML = '<div class="dialog"></div>';

    $.openDialog = function(opts) {
        // Create the DIV for dialog without inserting into DO
        var dialog = $(dialogHTML);
        dialog.appendTo('body');

        // Give dialog some basic CSS
        dialog.css({
            position: 'absolute', // positioned
            'z-index': Math.pow(2,32) // make it sit on top
        });

        // Position the dialog on the screen
        var horizOffset = ($(window).width() - opts.width || dialog.outerWidht()) / 2;
        var vertOffset = ($(window).height() - opts.height || dialog.outerHeight()) / 2;
        dialog.css({
            left: horizOffset,
            right: horizOffset,
            top: vertOffset,
            bottom: vertOffset
        });

        // Return dialog object to make it chainable
        return dialog;            
    };        

}(jQuery));

$.openDialog({width: 200, height: 100}).append('hello world');
​

キーイベントを処理して Esc で閉じる、ボタン付きのタイトルバーを追加するなど、多くのことを追加できます。しかし、とにかくこれらのことを行う方法をすでに知っているでしょう。

ダイアログを作成する際の注意事項:

  • ダイアログが常に一番上に表示されるように、十分に高い z-index を設定します
  • ダイアログ要素を追加しますBODY

私の経験では、ダイアログの HTML が常にページに存在しない場合、パフォーマンスはいくらか向上します。これはグレースフル デグラデーションに反しますが、DOM ツリーが軽いほど、アプリは高速に動作するように見えます。そのため、必要に応じてダイアログ要素をツリーに追加することをお勧めします。

編集:私のダイアログ プラグインは、ページに定義済みの HTML があることを想定していないことに注意してください。divを思い起こさせるだけです。したがって、要素を選択してダイアログに変換することはありません。代わりに、新たに作成します。

于 2012-06-15T09:18:23.750 に答える