codigos javascript 4
Botón página atrás/adelante en tu página
| El problema |
| Para muchos navegantes dela red eso de pulsar el botón Ir Atrás del explorador es algo incómodo, incluso en algunos casos, como los noveles en esto de internet, no conocen eso de los botones de navegación del explorador. Por eso sería ideal colocar un botón de ir atrás o ir adelante que permita el visitante retroceder a la última página o ir a la página siguiente. |
| La solución |
| Las páginas visitadas por un usuario quedan almacenadas en una lista llamda historial, una lista que no podemos consultar (ver el contenido) pero si recorrerla. En Javascript esa lista está representada por el objeto History y podemos recorrerla con los métodos back( ), forward( ), go( ): saltar atrás o adelante una página, o el número de páginas que le indiquemos en el argumento. |
| Un caso práctico |
|
Por ejemplo:
<a href="javascript:back( )"><img src="botonat.gif" border=20"></a>
Este código HTML colocaría en nuestra página una imagen (botonat.gif) que al ser pulsado con el ratón nos llevaría a la última página visitada.
|
Cerrar la ventana activa
| El problema |
| Cuando intentamos cerrar una ventana del explorador éste nos devuelve una ventanita pidiéndonos que confirmemos la orden de cerrar, salvo en el caso de que la ventana que se va a cerrar haya sido creada por un script. Sin embargo existe un truco que evita la aparición del mensaje de confirmación con el que podemos incluso cerrar la ventana principal del explorador. |
| La solución |
|
Hay que qclarar que esta solución sólo funciona a partir del Explorer 5.5, por lo que antes de aplicarla debemos verificar la versión del explorador. El truco es de lo más simple, básicamente se trata de hacer creer al explorador que la ventana no es la principal sino que ha sido abierta desde otra. El código es el siguiente
window.opener = "ventanamadre"
window.close()
Y listo.
|
| Un caso práctico |
|
El ejemplo de apllicación es de lo más simple. En la sección head colocas la función siguiente
function cerrar( )
{
window.opener = "madre"
window.close()
}
En la página puedes colocar el siguietne enlace:
<a href="javascript:cerrar()">Cierra esta ventana</a>
Recuerda que esto sólo funciona en versiones 5.5 o posterior de IExplorer.
|
Celdas de tablas como botones
| El problema |
| Las tablas son un excelente método para organizar el texto en una página web, y una de sus utilidades más interesantes es la creación de menús de navegación: basta una tabla de una columna y varias filas, en cada celda colocamos un título y un enlace y tenemos un menú vertical. Pero en los elementos de ese menú habría que pincar con el ratón justo en el título de cada entrada. ¿No sería ideal que toda la celda fuera sensible y actuara como un botón? |
| La solución |
|
Es muy fácil logar que las celdas de una tabla sean activas, es decir, reaccionen al paso del ratón o a la pulsación de uno de sus botones. Es tan simple como colocar el correspondiente evento en la celda:
<td onclick = "pulsar(iden)">Celda activa</td>
Con este esquema podemos construir un menú basado en una tabla. Observa que en este ejemplo el evento onclick (pulsar tecla del ratón) está vinculado a una función que hemos llamado pulsar y que lleva como argumento un valor que identificará a la celda donde se halla producido el evento, o sea, sobre la que hemos pinchado con el ratón.
|
| Un caso práctico |
|
Como caso práctico que ilustre esta solución vamos a construir un menú horizontal con tres elementos.
<table><tr>
<td onclick="pulsado(1)">Item 1</td>
<td onclick="pulsado(2)">Item 2</td>
<td onclick="pulsado(3)">Item 3</td>
</tr></table>
Lógicamente en la sección HEAD colocaremos la función pulsado( ) que se encargará de recibir estos eventos y cargr la dirección adecuada para cada elemento del menú pulsado:
function pulsado(num)
{
switch (num){
case 1: location = "pagina1.htm"
break
case 2: location = "pagina2.htm"
break
case 3: location = "pagina3.htm"
break;
}
|
Cambia el contenido de un iframe de forma dinámica
| El problema |
| Como sabes mediante los IFrames son marcos parecidos a los Frames, pero con la enorme ventaja de poder colocarlos en cualquier parte de tu página !incluso dentro de una tabla! Y lo que es mejor: puedes cambiar su contenido de forma dinámica. La pregunta es evidente ¿Como cambiar lo que se muestra dentro del IFrame? |
| La solución |
|
Pues la solución es de lo más simple, piensa que un IFrame es una página ¿como cambiar su contenido? pues con la propiedad location. El IFrame muestra la página que asignes a esta propiedad. Así de fácil. En general:
document.frames.nombre.location = url
donde nombre es el id del iframe y url es la página que quieres mostrar en él.
|
| Un caso práctico |
|
Para que veas como funciona esto construye dos páginas, una que se llame hola.htm y otra que se llame adios.htm. La primera contendrá tan solo la frase HOLA MUNDO y la segunda ADIOS MUNDO. Es que nos gusta ser originales. Y ahora viene la aplicación de este truco o miscript: Crea una página con el nombre frames.htm el contenido de este archivo será
<html>
<head>
<title>IFrames dinámicos</title>
<script language="javascript">
function modiframe(destino)
{
document.frames.marco.location=destino
}
</script>
</head>
<body>
<a href="javascript:modiframe('adios.htm')">Cambiar Iframe</a>
<p></p>
<iframe id="marco" width="300" height="400" src="hola.htm">
Este es el IFrame
</iframe>
</body>
</html>
Verás una página con un link que pone Cambiar Iframe y más abajo un marco iFrame con el contenido de la página hola.htm, al pulsar sobre el enlace este contenido cambiará al de la página adios.htm . Más fácil imposible, ¿verdad?
|
|
