テーマローラー CSS 使用時の jquery ダイアログの問題

StackOverflow https://stackoverflow.com/questions/45600

質問

の デモ jquery ui ダイアログではすべて「flora」テーマを使用します。カスタマイズしたテーマが必要だったので、memoroller を使用して CSS ファイルを生成しました。これを使用したときは、すべてが正常に動作しているように見えましたが、後で、ダイアログに含まれる入力要素を制御できないことがわかりました (つまり、テキスト フィールドに入力できず、チェックボックスをオンにすることもできません)。さらに調査を進めると、ダイアログ属性「modal」を true に設定すると、この問題が発生することが判明しました。flora テーマを使用すると、このようなことは起こりません。

js ファイルは次のとおりです。

topMenu = {
    init: function(){
        $("#my_button").bind("click", function(){
            $("#SERVICE03_DLG").dialog("open");
            $("#something").focus();
        });

        $("#SERVICE03_DLG").dialog({ 
            autoOpen: false,
            modal: true, 
            resizable: false,
            title: "my title",
            overlay: { 
                opacity: 0.5, 
                background: "black" 
            }, 
            buttons: { 
                "OK": function() { 
                    alert("hi!");
                }, 
                "cancel": function() { 
                    $(this).dialog("close"); 
                } 
            },
            close: function(){
                $("#something").val("");
            }
        });
    }
}

$(document).ready(topMenu.init);

以下は、flora テーマを使用する HTML です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>

<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

ダウンロードしたテーマローラーテーマを使用する HTML は次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>

<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label>&nbsp;<input name="something" id="something" type="text" maxlength="20" size="24">
</div>

</body>
</html>

ご覧のとおり、参照される CSS ファイルとクラス名のみが異なります。何が問題なのかわかる人はいますか？

@デビッド:試してみましたが、動作しないようです（FFでもIEでも）。インラインCSSを試してみました：

style="z-index:5000"

また、外部 CSS ファイルを参照して試してみました。

#SERVICE03_DLG{z-index:5000;}

しかし、これらはどちらも機能しません。あなたが提案した内容に何か欠けていますか？

編集：
ブロストビーフで解決！
元々floraを使っていたのでclass属性を指定しなければいけないと勘違いしていました。結局のところ、これは実際に flora テーマを (サンプルのように) 使用する場合にのみ当てはまります。カスタマイズされたテーマを使用している場合、クラス属性を指定すると、この奇妙な動作が発生します。

役に立ちましたか？

解決

クラスが違うからだと思います。
<div id="SERVICE03_DLG" class="flora"> （フローラ）
<div id="SERVICE03_DLG" class="ui-dialog"> （カスタム）

flora テーマを使用する場合でも、ダイアログとして定義するには ui-dialog クラスを使用します。

私は以前にモーダルをやったことがありますが、タグ内でクラスを定義したことさえありません。jQueryUI がそれを処理します。

class 属性を削除するか、「ui-dialog」クラスを使用してみてください。

他のヒント

Firebug でこれを試した後、デフォルトの div、ID「SERVICE03_DLG」に 1004 より大きい z-index 属性を追加すると、機能するようになります。念のため、5000 などの非常に高い値を設定します。

これを引き起こすmemoroller CSSの何が原因なのかはわかりません。おそらくダイアログに変わるターゲット div の位置属性を変更したか無視したのでしょう。

ダイアログとタブを備えたテーマローラーテーマを実装してみたところ、次のことがわかりました。 テーマローラー CSS は公式の jQuery では機能しません！特にダイアログとタブについては、公式の jquery クラスから要素クラスを変更しました。ここを参照してください:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_主題_for_jquery_ui/

ユーザーのコメント:

3）私がダウンロードした生成されたテーマは不完全であるように思われます - 私がそれを使用しようとするとき（私のタブ（フローラのテーマで動作する、ドキュメントの例と同じコード）タブとしてスタイルを取得しないように私のタブを使用しようとするとき

3に出くわしたので、私は立ち往生していて、「フローラ」を使用して戻る必要があると思っていました...それ以来、「デモ」ファイルのソースコードを読んで発見しました。 「UI-Tabs-Nav-Item」クラスをタブに使用すると機能します。

したがって、Themerollerによって生成されたテーマは、残念ながら不完全です。タブのものが不完全な場合、他に何が不完全であるのか疑問に思います。それはかなりイライラしていました。:(

続いてテーマローラー開発者のコ​​メントが続きます。

3) それを見てみましょう。これらのクラスをプラグインによって追加する必要があることは正しいことです。ただし、今のところは、テーマのテーマを使用できるように、マークアップに追加するだけではあまり痛くないでしょう。ただし、確認してみます。私たちのセレクターは代わりに親のUI-Tabsセレクターに基づいていると思いますが、セレクターに要素を使用しないようにしていたと思います。To-Doリストでそれを考慮してください

いやあ、これはいいですね。この 2 つのページでさまざまなことを試してみました。CSS を完全に省略して両方のページを試してみましたか?Firebug を使用して両方のページのヘッダーから CSS を削除しましたが、入力は一方のページでは機能し、もう一方のページでは機能しませんでしたが、Firebug ではレンダリングから CSS が完全に削除されないと信じがちです。実際にコードから削除すると、異なる結果が得られます。

また、マウスを使用してテキスト ボックスにテキストを貼り付けることができることもわかりましたが、キーボード入力は受け付けられません。ただし、これを妨げるイベント ハンドラーはないようです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top