dialogo tema jQuery e stile
-
22-08-2019 - |
Domanda
Come faccio a cambiare il colore della barra del titolo di una finestra di dialogo jQuery sfondo?
Ho guardato il themeroller ma non sembra funzionare per me.
Grazie
Soluzione
Lo faccio in questo modo (aggiungendo "ui-stato-errore" stile per intestazione):
<script type="text/javascript">
$(function () {
$("#msg").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
});
</script>
Altri suggerimenti
È possibile modificarlo modificando la classe CSS ui-dialogo-barra del titolo, ma consiglio vivamente di utilizzare il ThemeRoller strumento .
Vedi anche:
Ci sono classi associate a ciascun elemento della finestra di dialogo.
Usa Firebug per ispezionare gli elementi e utilizzare i CSS per lo stile di loro. Ad esempio, la barra del titolo ha la classe "ui-dialogo-barra del titolo".
(questo presuppone che si sta utilizzando l'interfaccia utente di dialogo jQuery)
Utilizzare la proprietà dialogClass
. È possibile applicare a qualsiasi css nella finestra di dialogo jQuery.
Di seguito per formattare le intestazioni e contenuto blocchi.
<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
$('#jq_dialog').dialog({
title: 'Detalhes do produto',
modal: true,
resizable: false,
width: 500,
maxHeight: 400,
closeText: 'fechar',
draggable: true,
show: 'fade',
hide: 'fade',
dialogClass: 'main-dialog-class'
});
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>
L'esempio precedente funziona bene, ma con solo il colore rosso del tema di errore.
Ecco una soluzione semplice con solo cambiando l'immagine di intestazione in css:
css:
.ui-widget-header-custom{
background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;
}
javascript:
$('#my_dialog').dialog({
open: function(event, ui){
$(this).parents(".ui-dialog:first").find(".ui-widget-header")
.removeClass("ui-widget-header").addClass("ui-widget-header-custom");
}
});
Si noti che, contrariamente al precedente esempio, ho rimosso il:
removeClass("ui-widget-header")
invece di aggiungere la classe sul:
find(".ui-dialog-titlebar")
Bisogna notare che questo esempio funziona con la finestra di intestazione senza il suo collegamento.
A volte non è possibile modificare il file CSS. Così si può provare questo:
dialog = $('<div/>').dialog({
title: 'Dialog with css for title bar',
open: function() {
$(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
}
});