A muchos de nosotros nos gustan los diseños simples. Y mejor aún si podemos darles ciertas opciones a los usuarios, como por
ejemplo mostrar u esconder ciertas cosas, el cual es el propósito de este tutorial.
A muchos de nosotros nos gustan los diseños simples. Y mejor aún si podemos darles ciertas opciones a los usuarios, como por ejemplo mostrar u esconder ciertas cosas, el cual es el propósito de este tutorial.
Información General
Este tutorial empleará varias cosas para llegar a nuestro fin. Estaremos utilizando:
- HTML
- CSS
- JavaScript
- Cookies
Aqui lo menos importante es el CSS, pero lo estoy utilizando para darle un mejor asepecto a los ejemplos, así que no le tienes que prestar atención. El nivel de JavaScript es intermedio, así que no sólo trataré de explicarles para que lo entiendan, si no que haré el JavaScript para que lo puedan utilizar con lo que sea. Los cookies los estaremos creando y manipulando con el mismo JavaScript, así que no necesitams ni PHP ni ASP como mucho pueden llegar a pensar. En este
link podrán ver el ejemplo que vamos a utilizar. Si ven el código del ejemplo verán que no hay nada de JavaScript. Eso lo iremos poniendo poco a poco.
Creación de la Funciones
Lo primero que vamos a hacer es crea la funciones, y el aspecto básico en el que debemos de pensar es el siguiente: al darle al botón quiero que la segunda columna se esconda, y que la primera ocupe el espacio de la segunda. Así que como primer paso vamos a crear las funciones de esconder y mostrar. Si notan en el HTML, cada columna tiene un "id", eso lo declaramos así para asociar el JavaScript de manera más fácil con el HTML, así que es algo necesario.
Antes de escribir las funciones debemos de hacerle dos modificaciones al archivo HTML. La primera es, a la segunda columna agregarle el atributo
style="display:;". El display es un atributo de CSS que nos permite establecer el tipo de visibilidad que tendrá cierto elemento. La segunda modificación es al input (que es el botón que hara que se ejectue la acción, que en realidad puede ser lo que sea) le vamos a agregar el atributo
onclick="em_columna();".
» Función de Esconder
Code:
function esconder(id_ele) {
d.getElementById(id_ele).style.display = "none";
} |
function mostrar(id_ele) {
d.getElementById(id_ele).style.display = "";
} |
function em_columna(id_ele) {
if (d.getElementById(id_ele).style.display == "") {
esconder(id_ele);
}
else {
mostrar(id_ele);
}
} |
Ok, ahí están las tres funciones principales por ahora. Ahora les explico como funciona. Con el
onclick="em_columna('columna2');" le pasamos al script que queremos que la segunda columna sea escondida. El string (porque lo definimos entre '') es el nombre del
id de la segunda columna. Aquí utilizamos muchas cosas de JavaScript, que prefiero explicar en otra parte, puesto que son cosas nativas del JavaScript y de los exploradores, basados en el
DOM (Document Object Modeling). La función condicional dice: "Si el display de la segunda columna es igual a "" entonces escondela, si no entonces muestrala." En este
link pueden ver un ejemplo que funciona.
El Cookie
Llegamos a una parte bastante... elaborada y que facilmente puede confundir. Así que lean con cuidado. Para el cookie vamos a necesitar dos funciones, más otra condicional. Una para crear el cookie, otra para leer el cookie y la condicional para saber el estado del cookie. Aquí están las funciones:
Función Crear Cookie
Code:
function crearcookie(nombre, valor) {
d.cookie = nombre + "=" + valor + "; path=/";
} |
function readCookie(nombre) {
var nombre_c = nombre + "=";
var arreglo_c = d.cookie.split(';');
for (i=0; i<arreglo_c.length; i++) {
var cookie_c = arreglo_c[i ];
//Nota, el espacio que hay entre el corchete y la letra "i" no va, lo que sucede es que si se escribe sin el espacio, el parse del site lo conderará un tag de phpBB (el de cursiva)
while (cookie_c.charAt(0) == ' ') {
cookie_c = cookie_c.substring(1, cookie_c.length);
}
if (cookie_c.indexOf(nombre_c) == 0) {
return cookie_c.substring(nombre_c.length, cookie_c.length);
}
}
return null;
} |
function opcion(id_ele, n_cookie) {
var x = leercookie(n_cookie);
if (x == 1) {
mostrar(id_ele);
}
else if (x == 0) {
esconder(id_ele);
}
} |
Ufff, bueno, ahora les explicare lo que hace cada función. (
Nota: en el ultimo ejemplo, encontrarán qeu incluí conemtarios através del código del documento, esto es para explicarles con mas detalle y de cerca que es lo que ocurre, asi que si no entienden algo de aca, vayan alla a ver si lo entienden, si no, preguntenme, con gusto les explicare). La primera función,
crearcookie es bastante sencilla, simplemente crea un cookie con el nombre que elijamos, y le asignamos el valor que queramos. *****La segunda función es para leer el cookie. Algo larga y mas complicada de lo que parece. Pero, basicamente es: vamos a buscar el nombre del cookie, luego hacemos un arreglo con los valores del cookie. Para hacer el arreglo separamos los valoresdel cookie por ";". Luego busco en el arreglo el nombre que le puse al cookie. Si encuentro el nombre, retorno el valor que le asigne. Si no, retrono nulo (null). Como mencione antes, si ven el código fuente del último ejemplo está con mucho más detalle. La condicional utiliza el valor que asigne para determinar el estado en que se debe de eonctrar la columna: escondida o mostrada.
Modificaciones
Ahora debemos de hacerle una modificación a la primera condicional, la funcion
em_columna
Code:
function em_columna(id_ele, n_cookie) {
if (d.getElementById(id_ele).style.display == "") {
esconder(id_ele);
crearcookie(n_cookie, 0);
} else {
mostrar(id_ele);
crearcookie(n_cookie, 1);
}
} |
Si se fijan, agregue el llamado a la funcion
crearcookie y le pase unos valores, que son el nombre del cookie que elegi, más un valor. Cuando quiero que la columna no se muestre le asigno "0", y cuando quiero que se muestre le asigno "1". Y eso es todo. El ejemplo final lo pueden ver en este
link.
Espero que le saquen provecho, y cualquier duda no duden en preguntarme XD. Más adelante ire añadiendo más ejemplos para que vean diferentes posibilidades.