Un problema con la finestra di dialogo jquery quando si utilizza il css themeroller

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

Domanda

IL demo per la finestra di dialogo dell'interfaccia utente jquery, tutti utilizzano il tema "flora".Volevo un tema personalizzato, quindi ho usato themeroller per generare un file css.Quando l'ho usato, tutto sembrava funzionare bene, ma in seguito ho scoperto che non riesco a controllare alcun elemento di input contenuto nella finestra di dialogo (ovvero, non posso digitare in un campo di testo, non posso selezionare le caselle di controllo).Ulteriori indagini hanno rivelato che ciò accade se imposto l'attributo della finestra di dialogo "modal" su true.Ciò non accade quando utilizzo il tema flora.

Ecco il file 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);

Ecco l'html che utilizza il tema flora:

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

Ecco l'html che utilizza il tema themeroller scaricato:

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

Come puoi vedere, solo il file CSS di riferimento e i nomi delle classi sono diversi.Qualcuno ha la minima idea di cosa potrebbe esserci che non va?

@Davide:L'ho provato e non sembra funzionare (né su FF né su IE).Ho provato il CSS in linea:

style="z-index:5000"

e l'ho anche provato facendo riferimento a un file CSS esterno:

#SERVICE03_DLG{z-index:5000;}

Ma nessuno di questi funziona.Mi sto perdendo qualcosa in quello che hai suggerito?

Modificare:
Risolvi con brostbeef!
Dato che inizialmente utilizzavo flora, avevo erroneamente supposto di dover specificare un attributo di classe.Risulta che questo è vero solo quando usi effettivamente il tema flora (come negli esempi).Se usi il tema personalizzato, specificare un attributo di classe provoca questo strano comportamento.

È stato utile?

Soluzione

Penso che sia perché avete classi diverse.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (costume)

Anche con il tema flora, utilizzeresti comunque la classe ui-dialog per definirlo come un dialogo.

Ho già eseguito modali e non ho mai nemmeno definito una classe nel tag.jQueryUI dovrebbe occuparsene per te.

Prova a eliminare l'attributo class o a utilizzare la classe "ui-dialog".

Altri suggerimenti

Dopo aver giocato con questo in Firebug, se aggiungi un attributo z-index maggiore di 1004 al tuo div predefinito, id di "SERVICE03_DLG", funzionerà.Gli darei qualcosa di estremamente alto, come 5000, tanto per essere sicuro.

Non sono sicuro di cosa ci sia nel CSS themeroller a causare questo.Probabilmente hanno cambiato o trascurato l'attributo position del div target che si trasforma in una finestra di dialogo.

Ho provato a implementare un tema themeroller con una finestra di dialogo e schede e si è scoperto che il CSS themeroller non funziona con jQuery ufficiale!Soprattutto per le finestre di dialogo e le schede, sono state modificate le classi degli elementi rispetto a quelle ufficiali di jquery.Vedere qui:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

Il commento di un utente:

3) Il tema generato che ho scaricato sembra essere incompleto - Quando provo a usarlo le mie schede (che funzionano con il tema Flora, codice identico all'esempio della documentazione) non venga disegnato come schede

Avendo incontrato in 3 ho pensato di essere bloccato e avrei dovuto tornare usando "Flora" ... Da allora ho scoperto leggendo il codice sorgente del file "demo" che se regolo il mio html e danno gli articoli <li> sono Usando per le mie schede la classe "Ui-Tabs-Nav-Item", funzionerà.

Il tema generato da TheTheroller è quindi purtroppo incompleto.Se la roba delle schede è incompleta, mi chiedo cos'altro è incompleto.Era piuttosto frustrante.:(

seguito dal commento degli sviluppatori di themeroller:

3) Daremo un'occhiata a questo.Hai ragione sul fatto che quelle classi dovrebbero essere aggiunte dal plugin.Per ora, però, probabilmente non farebbe molto male aggiungerli al tuo markup in modo da poter usare i temi di teroller.Lo controlleremo, però.Penso che i nostri selettori potrebbero invece essere basati sul selettore di UI-TABS dei genitori, ma penso che stessimo cercando di non usare elementi nei nostri selettori.Consideralo nella lista delle cose da fare

Amico, questo è bello.Ho provato a fare un sacco di cose su queste due pagine.Hai provato a lasciare del tutto fuori il CSS e provare entrambe le pagine?Ho usato Firebug per rimuovere il CSS dall'intestazione su entrambe le pagine e l'input funzionava ancora su una e non sull'altra, ma sono propenso a credere che Firebug non rimuova completamente il CSS dal rendering e tu otterrai risultati diversi se lo rimuovi effettivamente dal codice.

Ho anche scoperto che puoi incollare il testo nella casella di testo utilizzando il mouse: semplicemente non accetterà input da tastiera.Tuttavia, non sembra esserci alcun gestore di eventi che possa interferire con questo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top