Temas > Programacion > Java script - Java > Efecto con el metodo toggle en jQuery
Julio

Efecto con el método toggle
El método toggle permite cada vez que se ejecute 
cambiar de estado la visibilidad del elemento HTML, 
es decir si está visible pasa a oculto y si se encuentra 
oculto pasa a visible.
Problema:Hacer que un bloque de información pase de 
visible a oculto lentamente y viceversa al presionar un botón.
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <input type="button" id="boton1" value="Mostrar/Ocultar">
 <div id="descripcion" class="recuadro">
 <p>HTML es el lenguaje que se emplea para el desarrollo de
 páginas
 de internet.</p>
 <p>Este lenguaje está constituido de elementos que el
 navegador interpreta y las despliega en la pantalla
 de acuerdo a su objetivo. Veremos que hay elementos para
 disponer imágenes sobre una página, hipervínculos
 que nos permiten dirigirnos a otra página, listas, tablas para
 tabular datos, etc.</b><p>Para poder crear una página 
 HTML se requiere un simple editor
 de texto (en nuestro caso emplearemos
 este sitio) y un navegador de internet (IExplorer, FireFox
 etc.), emplearemos el navegador que en este preciso 
 momento está utilizando (recuerde que usted está viendo 
 en este preciso momento una página HTML con su navegador).
</p>
 <p>Lo más importante es que en cada concepto desarrolle los
 ejercicios propuestos y modifique los que se presentan ya resueltos.
<p>
 <p>Este curso lo que busca es acercar el lenguaje HTML a una
 persona que nunca antes trabajó con el mismo.
 No pretende mostrar todas los elementos HTML en forma
 alfabética.</p>
 <p>Como veremos, de cada concepto se presenta una parte
 teórica, en la que se da una explicación completa,
 luego se pasa a la sección del ejercicio resuelto donde
 podemos ver el contenido de la página HTML y cómo la visualiza 
 el navegador.
 Por último y tal vez la sección más importante de este
 tutorial es donde se propone que usted haga páginas en forma 
 autónoma (donde realmente podrá darse cuenta si el concepto 
quedó firme).</p>
 </div>
 </body>
 </html>
?>//esto no va
funciones.js
<?php //esto no va
 var x;
 x=$(document);
 x.ready(inicializarEventos);
 function inicializarEventos()
 {
   var x=$("#boton1");
   x.click(ocultarMostrarRecuadro);
 }
 function ocultarMostrarRecuadro()
 {
   var x=$("#descripcion");
   x.toggle("slow");
 }
?>//esto no va
estilos.css
<?php //esto no va
 .recuadro {
   background-color:#ffffcc;
   font-family:verdana;
   font-size:14px;
   border-top-width:1px;
   border-right-width:3px;
   border-bottom-width:3px;
   border-left-width:1px;
   border-top-style:dotted;
   border-right-style:solid;
   border-bottom-style:solid;
   border-left-style:dotted;
   border-top-color:#ffaa00;
   border-right-color:#ff0000;
   border-bottom-color:#ff0000;
   border-left-color:#ffaa00;
 }
La función ocultarMostrarRecuadro:
function ocultarMostrarRecuadro()
{
  var x=$("#descripcion");
  x.toggle("slow");
}
?>//esto no va
se encarga de llamar al método toggle del objeto jQuery, 
y este analiza si actualmente el elemento está visible u oculto, 
la transición se hace en forma lenta ya que le pasamos como 
parámetro el string "slow".













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar