Elementi tematici all'interno di una finestra di dialogo dell'interfaccia utente di Jquery con CSS ... come?
Domanda
Dal momento che la vecchia versione era apparentemente troppo difficile da capire per le persone, ecco l'HTML, CSS e JavaScript combinati:
<!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=utf-8">
<title>test title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').dialog({ autoOpen: false, modal: true });
$("#test-link").click( function() {
$('#test').dialog('open');
});
});
</script>
<style type="text/css">
div#main div#test label {
display: block;
}
div#main div#test input {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="main">
<p><a href="#" id="test-link">test</a><p>
<div id="test" title="Submit Bug or Feature Request">
<form>
<label for="test_desc">Short Description:</label>
<input type="text" name="test_desc" id="test_desc" value="" />
<input type="submit" name="" value="Submit" />
</form>
</div>
</div>
</body>
</html>
La finestra di dialogo funziona bene, ma il CSS no. Qualche idea sul perché?
Soluzione
JQuery sposta il DIV di una finestra di dialogo nell'albero DOM e lo avvolge in alcuni altri. Pertanto i selettori CSS non funzioneranno. Utilizzando l'esempio sopra, dovresti fare qualcosa del genere:
div.ui-dialog div#test label {
display: block;
}
div.ui-dialog div#test input {
padding-left: 100px;
}
Altri suggerimenti
Il CSS dovrebbe funzionare. Potrebbe essere un problema con la modalità a cascata delle regole CSS. Esiste un selettore più specifico che applica queste regole come " #dialog div # test label " ;? Senza il resto di html / css è impossibile sottolineare i dettagli. Ottieni firebug e vedi quali regole vengono applicate a quegli elementi.