Ahora que hemos explicado los diferentes componentes o widgets disponibles en JQuery UI veamos cómo podemos cambiar de theme de forma dinámica.
Para ello, tal y como hemos descrito al principio del presente tutorial asignaremos un atributo id a la etiqueta <link> con la que asignamos inicialmente la hoja de estilos a utilizar en la página. Posteriormente para modificarla cambiaremos su atributo href.
Veamos un ejemplo en el que creamos algunos widgets para luego seleccionar entre los themes 'smoothnes' y '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 id="estilos" 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" id="boton" value="Cargar theme 'cupertino'" />
<a href="#" id="e">Cargar a theme 'smoothness'</a><p />
<p><input type="text" id="spinner" size="4" /></p>
<div id="slider"></div>
<div id="ventana">
<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>