Febbraio 6, 2021

JQuery Tutorial (Italiano)

Modifica dal tema

Ora che abbiamo spiegato i diversi componenti o widget disponibili in jQuery ui vediamo come possiamo cambiare tema dinamicamente.

Per questo, come abbiamo descritto all’inizio di questo tutorial, assegneremo un ID di attributo a L’etichetta < link > con cui inizialmente assegniamo il foglio di stile da utilizzare sulla pagina. Successivamente per modificarlo, cambieremo il suo attributo href.

Vediamo un esempio in cui abbiamo creato alcuni widget e quindi selezionare tra temi “Smoothnes” e “Cupertino”:

<

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>InformaticaPC | Cambiar theme de JQuery UI</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { background-color:lightyellow;font-family:Arial;font-size:10pt; } #slider, #slider { width:100px; } .texto { float:right;width:250px;text-align:justify; } .imagen { float:left;width:210px; } </style> <!-- Observa que agregamos también la librería JQuery UI --> <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script> <!-- Agregamos también el archivo CSS del theme que usemos --> <link type="text/css" rel="stylesheet" href="../lib/css/cupertino/jquery-ui.css" /> <script type="text/javascript"> $(document).ready(function() { // Creamos unos cuantos widgets: $("#ventana").dialog( {width:500, title:"Cambiando el theme en JQuery UI", close:cerrar }); $("#boton").button(); $("#enlace").button(); $("#slider").slider(); $("#spinner").spinner(); // Cuando se haga clic en el botón o el enlace, se cambiará de theme: $("#boton").click(function(){ $("#estilos").attr("href","../lib/css/smoothness/jquery-ui-1.10.1.custom.min.css"); }) $("#enlace").click(function(){ $("#estilos").attr("href","../lib/css/cupertino/jquery-ui.css"); }) }); // ------------------- // Al cerrar la ventana function cerrar() { $("#log").text("Se ha cerrado la ventana"); } </script> </head> <body> <input type="button" value="Cargar theme 'cupertino'" /> <a href="#">Cargar a theme 'smoothness'</a><p /> <p><input type="text" size="4" /></p> <div></div> <div> <div class="texto">Estamos realizando pruebas cambiando el theme activo de JQUERY UI.</div> <div class="imagen"><img src="logo.jpg" alt="" /></div> </div> </body></html>

Esempio

Vedi anche: –

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *