Edición de «Integrar KumbiaPHP Spirit con jQuery»
De KumbiaPHP Framework Wiki
Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.
Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.
Revisión actual | Tu texto | ||
Línea 1: | Línea 1: | ||
− | + | En el siguiente ejemplo veremos como se puede integrar KumbiaPHP Framework versión 1.0 con jQuery de forma rápida y sencilla para explotar las bondades que ofrece jQuery como framework de JavaScript. Se estima que en la versión 1.1 de KumbiaPHP los helpers para el manejo de ajax estaran migrado hacia jQuery. | |
− | |||
− | |||
− | |||
− | En el siguiente ejemplo veremos como se puede integrar | ||
− | |||
==Instalar jQuery== | ==Instalar jQuery== | ||
− | Lo primero es descargar la versión mas actual de jQuery, en este caso la versión [http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js 1.3.2], una vez descargada se colocaran las | + | Lo primero es descargar la versión mas actual de jQuery, en este caso la versión [http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js 1.3.2], una vez descargada se colocaran las librerias en el directorio '''[app]/public/javascript/jquery/''' |
− | |||
− | '''[app]/public/javascript/jquery/''' | ||
==application.js== | ==application.js== | ||
− | Este archivo ha sido creado para hacer mas simple el manejo de jQuery dentro de | + | Este archivo ha sido creado para hacer mas simple el manejo de jQuery dentro de KumbiaPHP. En su momento haremos un plugin exclusivo para KumbiaPHP. |
Creamos el archivo application.js y lo ubicamos en el directorio '''[app]/public/javascript/kumbia/''' con el siguiente contenido. | Creamos el archivo application.js y lo ubicamos en el directorio '''[app]/public/javascript/kumbia/''' con el siguiente contenido. | ||
<source lang=javascript> | <source lang=javascript> | ||
− | jQuery(function($) { | + | jQuery(document).ready(function($) { |
$("a.jsShow").live('click' , function(event) { | $("a.jsShow").live('click' , function(event) { | ||
Línea 44: | Línea 37: | ||
Este archivo cuenta con una serie de '''class''' utiles para el manejo de AJAX. | Este archivo cuenta con una serie de '''class''' utiles para el manejo de AJAX. | ||
− | + | #'''jsRemote''' hace peticiones al servidor, es decir carga una action en KumbiaPHP y su vista si asi nuestra lógica lo indicara. | |
− | + | #'''jsHide''' Oculta un objeto del DOM. | |
− | + | #'''jsShow''' Muestra el objeto del DOM oculto. | |
− | + | #'''jsShow''' Muestra/Oculta un Objeto del DOM. | |
==Incluir jQuery y application.js en el template== | ==Incluir jQuery y application.js en el template== | ||
Línea 63: | Línea 56: | ||
<?php echo javascript_library_tag('application') ?> | <?php echo javascript_library_tag('application') ?> | ||
<?php echo stylesheet_link_tag('style') ?> | <?php echo stylesheet_link_tag('style') ?> | ||
− | <?php echo stylesheet_link_tags(); ?> | + | <?php echo Kumbia::stylesheet_link_tags(); ?> |
</head> | </head> | ||
<body> | <body> | ||
Línea 85: | Línea 78: | ||
</html> | </html> | ||
</source> | </source> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |