febrer 6, 2021

Tutorial de JQuery (Català)

Canviant de theme

Ara que hem explicat els diferents components o widgets disponibles a JQuery UI vegem com podem canviar de theme de forma dinàmica.

Per a això , tal com hem descrit a el principi de el present tutorial assignarem un atribut id a l’etiqueta < link > amb la qual assignem inicialment el full d’estils a utilitzar en la pàgina. Posteriorment per modificar-la canviarem el seu atribut href .

Vegem un exemple en què vam crear alguns widgets per després seleccionar entre els themes ‘ smoothnes ‘ i ‘ 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>

Exemple

Més informació

Vegeu també: –

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *