jquery-ui - カスタム CSS スコープと jQuery UI ダイアログ テーマ

Question

1 つのページで複数の jQuery UI ダイアログ テーマを使用していますが、バグがあります。

[jQuery 1.3.2] [jQuery UI 1.7.2]

スクリーンショットは次のとおりです（カスタムCSSスコープと比較）：

ページに一人で 1)

対ネイティブ 2)

どうすればこれを修正できますか?

Answer 1

今日も同じ問題にぶつかりました。作成したダイアログは、現在の階層から取り出され、body 要素の最後に配置されているようです。これは、カスタムCSSスコープでカバーされていないことを意味します。

「dialogClass」オプションは、ダイアログ要素のクラスを設定するため、同様に役に立ちませんが、ダイアログがカスタム クラスを持つ要素の子孫である必要があります。

これを機能させる 1 つの方法は、body タグにカスタム クラスを設定することです。ただし、これはドキュメント全体が影響を受けることを意味し、1 つのページで異なるテーマを使用することはできなくなります。

私がたどり着いた方法は、ダイアログ要素をカスタムスコープを持つ要素に戻すための小さな回避策です。カスタム テーマを適用する必要があるすべてを含む "myCustomScope" クラスの div があると仮定します。そして、ダイアログになるはずのID「myDialogContent」を持つdiv：

// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
    autoOpen: false
    // Other dialog options
});
// Take the whole dialog and put it back into the custom scope.
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen).
d.dialog('open');

Answer 2

1) ダイアログの作成後に .ui-dialog 要素をラップする必要があります。2) ダイアログを開いた後に .ui-widget-overlay 要素をラップします。.ui-widget-overlay 要素は、ダイアログが開いたり閉じたりするたびに作成/破棄されるため、3) ダイアログを閉じるときに .ui-widget-overlay の空のラッパーを削除する必要があります (そうしないと、多くの空のラッパーが取得されます)。

$(function() {
$("#dialog").dialog({
    position: "center",
    autoOpen: false,
    modal: true,
    create: function(event, ui){
        $('.ui-dialog').wrap('<div class="your-class" />');
    },
    open: function(event, ui){
        $('.ui-widget-overlay').wrap('<div class="your-class" />');
    },
    close: function(event, ui){
        $(".your-class").filter(function(){
            if ($(this).text() == "")
            {
                return true;
            }
            return false;
        }).remove();
        }
    });
});

JQuery UI 1.8.13 でテスト済み。

Answer 3

ダイアログに加えて、通常の HTML フローから取り出される他の jQuery UI 要素があります。たとえば、オートコンプリート ウィジェット。

これらの行に沿った何かがうまくいくように見えることがわかりました：

$(window).load(function() {
 $('.ui-autocomplete').wrap('<div class="css_scope_selector" />');
});

window.load でこれを行うのは理想的ではないかもしれませんが。

Answer 4

ダイアログ ウィジェットは、設計により本文に追加されます。jQuery UI 開発チームが予期していない DOM 内の別の場所に移動することに不安を感じる場合、1 つの解決策は、それを使用する他の要素にスコープを適用するのと同じ方法で、スコープをダイアログに適用することです。 、テーマのスコープをクラスとして div タグでラップするだけです。

$("#mydialog").dialog().parent(".ui-dialog").wrap("<div class='custom-theme-css-scope'></div>");

Answer 5

アンドレアの答えは、オーバーレイが機能しているiframeとモーダルについてこれに私を導きました。開いた後に幅と高さを設定し、スコープされた div にもオーバーレイを追加する必要がありました。

var d = $("<iframe src=\"" + src + "\" id=\"upload_iframe\" />")
.dialog(
{
    title: "Import",
    autoOpen: false,
    width: 1000,
    height: 600,
    modal: true,
    resizable: false,
    draggable: false
});

var scope = $("<div>").addClass("jquery-ui-scope").appendTo("body");

d.parent(".ui-dialog").appendTo(scope);
d.dialog("open").width(990).height(590);
$(".ui-widget-overlay").appendTo(scope);

Answer 6

//Try this to fix problem
//note: jquery-ui-1.7.2

var dwrap = [false, false];
//0 - dialog1 flag(modal: true)
//1 - dialog2 flag(modal: false)

//?dialog1 = your dialog id
// example: mytest-dialog1
//?dialog2 = your dialog id
// example: mytest-dialog2

//?custom css scope = your custom css scope
// example: .my-dialog-themes

 function DialogTheme(dialog){
    switch (dialog){
     case 0 :
      if( !dwrap[0] ){ 
       $("div[aria-labelledby*='ui-dialog-title-?dialog1']").wrap("<div class='?custom css scope'></div>"); 
       dwrap[0] = true; 
      }
      //for overlay no good way but i dont see another
     $(".ui-widget-overlay").wrap("<div class='?custom css scope'></div>"); 
     break; 
     case 1 : 
      if( !dwrap[1] ){
       $("div[aria-labelledby*='ui-dialog-title-?dialog2']").wrap("<div class='?custom css scope'></div>"); 
       dwrap[1] = true; 
       }
     break; 
     default : 
     break; 
    }
 }

//Use:
//after open dialog call DialogTheme(0) for modal and DialogTheme(1) for none modal
//example:

 $("#?dialog1").dialog('open');
 DialogTheme(0);

//This way work correct on the page except overlay, 
//note you must have jquery-ui-1.7.2 other versions not tested
//It's all

アンドレアスさん、ご回答ありがとうございます