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:

[javascript] $(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(); }); } [/javascript]

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] [/php]

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] ‘#form-vehicle’,‘class’=>‘jsShow’)); ?>

Div con contenido que esta oculto mediante css usando display: none; y que se va a mostrar cuando hagan click en el enlace.

[/php]

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] ‘#form-contact’,‘hide’=>'#show-contact',‘class’=>‘jsChange’));?>

Elemento que esta visible y que pasara a estar invisible Elemento que esta invisible y que pasara a estar visible

[/php]

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 :)