Mostrar y ocultar div, Jquery + KumbiaPHP

Son archi conocidos los metodos show() y hide() de JQuery para mostrar y ocultar elementos. Y vamos a aprovecharlos y usarlos en kumbiaphp. Esto esta explicado en la wiki de kumbiaphp pero yo lo queria difundir un poco mas y mostrar otro ejemplo de uso.

Primero, creamos un archivo llamado global.js donde colocaremos todo el codigo JQuery necesario. Esto lo hacemos para no tener que estar poniendo codigo Jquery dentro de cada vista.

El archivo contendra lo siguiente:

$(document).ready(function(){
$("a.jsRemote").on('click', function(event) {
event.preventDefault();
$(this.rel).load(this.href)
});
$("a.jsShow").on('click' , function(event) {
event.preventDefault();
$(this.rel).show();
});

$("a.jsHide").on('click', function(event) {
event.preventDefault();
$(this.rel).hide();
});

$("a.jsToggle").on('click', function(event) {
event.preventDefault();
$(this.rel).toggle();
});

$("a.jsChange").on('click', function(event) {
event.preventDefault();
varHide=$(this).attr('hide');
$(varHide).hide();
varShow=$(this).attr('show');
$(varShow).show();
});
}

Son 5 funciones y lo que hacen es:

  • jsRemote: carga la vista que se le pase como parametro
  • JsShow: muestra un elemento (generalmente un div) que este oculto(generalmente mediante css con display:none)
  • jsHide: oculta un elemento
  • jsToggle: cambie de visible a oculto y viceversa un elemento
  • jsChange: muestra un elemente mientras oculto otro distinto

Como se usa?

Primero deben colocar en tu template una llamada para que se cargue ese archivo. Seguramente sera en la cabecera(head) de la pagina. Asi:

<?php echo Tag::js('proyecto/global');?>

Luego, en cada vista donde quieras usarlo deberas tener un enlace y el/los divs que se van a mostrar o ocultar. Por ejemplo:

Para mostrar un div que esta oculto en tu vista, deberas tener esto:

<?php echo Html::link('#', 'Add Vehicle', array('rel'=>'#form-vehicle','class'=>'jsShow')); ?>
<div id="form-vehicle">
Div con contenido que esta oculto mediante css usando display: none; y que se va a mostrar cuando hagan click en el enlace.
</div>

Como veran es un enlace que no apunta a ningun lado y que tiene 2 parametros:

  • class: establece cual es la funcion de jquery que se usara.
  • rel: el elemento(div) que se mostrara

Las funciones jsHide y jsToggle funcionan de la misma manera.

jsRemote por otro lado debe ser un enlace que si apunte a algun lado, porque ese lugar a donde apunte sera lo que se cargue en el div(o cualquier otro elemento) que le indiquemos.

Y jsChange sirve para ocultar un div y mostrar otro. Por ejemplo:

<?php echo Html::link('#','Edit Contact Info',array('show'=>'#form-contact','hide'=>'#show-contact','class'=>'jsChange'));?>
<div class="show-contact">
Elemento que esta visible y que pasara a estar invisible
</div>
<div clas="form-contact">
Elemento que esta invisible y que pasara a estar visible
</div>

Y no recibe los mismos 2 parametros que las otras funciones sino que son:

  • class: la accion jsChange
  • show: el div o elemento que se quiere mostrar
  • hide: el id del div o elemento que se quiere ocultar

Espero que este pequeño tuto les sirva

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

5
Comenta!

avatar
Alberto Berroteran

El metodo «live» estan desaconsejado y hasta se marcó como deprecated, es mejor usar «on», ya hay una versión en desarrollo de kumbia que así lo implementa.

sefsinalas

Investigando…gracias por la info

joanhey
joanhey

Los helpers se le puede pasar un array o un string para los atributos.
En la mayoría de casos es más cómodo el string.
Ej:
array: ‘#form-vehicle’,’class’=>’jsShow’)) ?>
string:

joanhey
joanhey

No se ve bien, pero se puede pasar los atributos asi:

«rel=’#form-vehicle’ class=’jsShow'»

trackback

[…] Zurb. Son frameworks completos, con estilos para formularios, botones, carteles, algo de javascript/jquery y mucho mas. Ademas de que cuentan con una gran comunidad que es muy importante pero…si eres […]