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 [http://jquery.com/ jQuery] de forma rápida y sencilla para explotar las bondades que ofrece este 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 | ||
− | Se estima que en la versión 1. | ||
==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 38: | ||
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 57: | ||
<?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 79: | ||
</html> | </html> | ||
</source> | </source> | ||
+ | |||
== Veamos un Ejemplo == | == Veamos un Ejemplo == | ||
Línea 97: | Línea 92: | ||
Agregamos dos elementos al helpers '''link_to''' un rel y una class, ambos tienen un significado. | Agregamos dos elementos al helpers '''link_to''' un rel y una class, ambos tienen un significado. | ||
− | + | ''' | |
− | '''rel:''' indica el objeto del DOM a actualizar, en este caso sera el id '''mi-div'''. | + | rel:''' indica el objeto del DOM a actualizar, en este caso sera el id '''mi-div'''. |
'''class:''' Es quien activa el evento en jQuery, en este caso esa class realiza una petición asíncrona. | '''class:''' Es quien activa el evento en jQuery, en este caso esa class realiza una petición asíncrona. | ||
Línea 105: | Línea 100: | ||
<pre><div id="mi-div"><?php View::content(); ?></div></pre> | <pre><div id="mi-div"><?php View::content(); ?></div></pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |