Febreiro 6, 2021

jQuery tutorial (Galego)

Cambio de tema

agora que explicamos os diferentes compoñentes ou widgets dispoñibles en jQuery UI imos ver como podemos cambiar de xeito dinámico.

Para iso, como describimos ao comezo deste tutorial, asignaremos un ID de atributo a A etiqueta < ligazón > co que inicialmente asignamos a folla de estilo que se pode usar na páxina. Posteriormente para modificalo, imos cambiar o seu atributo href.

Vexamos un exemplo no que creamos algúns widgets e logo seleccionamos entre temas ‘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>

exemplo

Ver tamén: –

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *