Ein Problem mit dem jquery-Dialogfeld bei der Verwendung der css-themeroller

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

Frage

Die - demos für die jquery ui-dialog verwenden Sie den "flora" - Thema.Ich wollte ein angepasstes Design, so habe ich das themeroller zu generieren, die eine css-Datei.Wenn ich es benutzt habe, alles schien zu funktionieren gut, aber später habe ich festgestellt, dass ich nicht kontrollieren können, jedes Eingabeelement im dialog (ich.e, kann nicht geben Sie in ein Textfeld, kann nicht überprüfen, Kontrollkästchen).Weitere Untersuchungen ergaben, dass dies geschieht, wenn ich den dialog Attribut "modal" zu wahren.Dies geschieht nicht, wenn ich den flora-Thema.

Hier ist die js-Datei:

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);

Hier ist der html-Code verwendet, der flora-Thema:

<!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>

Hier ist der html-Code verwendet, die heruntergeladenen themeroller theme:

<!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>

Wie Sie sehen können, nur die referenzierten css-Datei-und Klassennamen unterschiedlich sind.Jemand eine Ahnung, was falsch sein könnte?

@David:Ich habe es versucht und es scheint nicht zu funktionieren (weder auf FF oder IE).Ich habe versucht, inline-css:

style="z-index:5000"

und ich habe es auch ausprobiert verweisen auf eine externe css-Datei:

#SERVICE03_DLG{z-index:5000;}

Aber keine dieser arbeiten.Bin ich etwas fehlt, was Sie vorgeschlagen?

Edit:
Lösen von brostbeef!
Da war ich ursprünglich über flora, ich hatte irrtümlich angenommen, ich muss eine Klasse angegeben-Attribut.Stellt sich heraus, das ist nur wahr, wenn Sie tatsächlich mit dem Thema flora (wie in den Beispielen).Wenn Sie das angepasste Design, die Angabe einer Klasse Attribut bewirkt, dass seltsame Verhalten.

War es hilfreich?

Lösung

Ich denke, es liegt daran, dass Sie die verschiedenen Klassen.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)

Auch mit der flora Thema, würden Sie immer noch die ui-dialog-Klasse zu definieren, es als dialog.

Ich habe getan, modals, bevor und ich habe noch nie definiert eine Klasse in den tag.jQueryUI sollte sich darum kümmern, dass für Sie.

Versuchen Sie, loszuwerden, die Klasse Attribut oder unter Verwendung des "ui-dialog" Klasse.

Andere Tipps

Nach dem spielen mit diesem in Firebug, wenn Sie einen z-index-Attribut größer als 1004 zu Ihrem Standard-div-id "SERVICE03_DLG", dann wird es funktionieren.Ich würde es etwas extrem hoch, wie 5000, nur um sicher zu sein.

Ich bin mir nicht sicher, was es ist in der themeroller CSS, die Ursachen dieser.Sie haben wahrscheinlich geändert oder vernachlässigt das position-Attribut des Ziel-div dass Sie sich in einen dialog.

Ich habe versucht, die Implementierung eines themeroller theme mit einen dialog-Registerkarten und es stellt sich heraus, dass der themeroller CSS funktioniert nicht mit der offiziellen jQuery!Besonders für Dialoge und Registerkarten, veränderten Sie die element-Klassen aus der offiziellen jquery lieben.Siehe hier:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

Benutzer Kommentar:

3) das erzeugte Thema, dass ich heruntergeladen scheint unvollständig zu sein - wenn ich versuche, es zu benutzen meine tabs (die Arbeit mit der flora Design, code identisch mit der Dokumentation Beispiel) nicht bekommen, gestylt als tabs

Da Sie ins 3 ich dachte, ich war stecken und hätte um wieder mit “flora"... ich habe entdeckt, durch die seit Lesen Sie den source-code von "demo" Datei, wenn ich die Lautstärke meiner html-und geben die < li> Elemente, die ich für meine tabs die "ui-tabs-nav-item" Klasse, dann ist es arbeiten.

Das Thema generiert themeroller ist daher leider unvollständig.Wenn die tabs Zeug ist unvollständig, es macht mich Frage mich, was ist unvollständig.Es war sehr frustrierend.:(

gefolgt von der themeroller-Entwickler Kommentar:

3) Wir werden mal sehen.Du hast Recht, dass diejenigen Klassen sollte Hinzugefügt werden, indem Sie das plugin.Für jetzt, obwohl, ist es wahrscheinlich, würde nicht Schaden, viel zu einfach fügen Sie Sie zu Ihrem markup, so dass Sie können themeroller Themen.Wir werden es überprüfen, wenn.Ich denke, unsere Selektoren werden könnte aus der Basis von der übergeordneten ui-tabs-Selektor anstelle, aber ich denke, wir waren bemüht, nicht zu verwenden Sie die Elemente in unserem Selektoren.Betrachten auf der to-do-Liste

Mann, das ist ein guter.Ich habe versucht zu tun ein paar Dinge, die auf diesen zwei Seiten an.Haben Sie versucht, nur zu verlassen CSS, insgesamt und versucht, beide Seiten dann?Ich habe Firebug verwendet, um entfernen Sie die CSS aus dem Kopf auf beiden Seiten, und die Eingabe arbeitet noch auf die eine und nicht auf die anderen -, aber ich bin geneigt zu glauben, dass Firebug nicht vollständig entfernen Sie die CSS aus dem rendering, und erhalten Sie andere Ergebnisse, wenn Sie tatsächlich entfernen Sie es aus dem code.

Ich fand auch, dass können Sie fügen Sie den text in das Textfeld mit der Maus - es will einfach nicht akzeptieren, Tastatur-Eingaben.Es scheint nicht zu jedem event-handler auf, dass es stören würde, auch wenn.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top