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 == | ||
− | Ahora veremos un ejemplo para apreciar de formas precisa lo que podemos hacer. El ejemplo | + | Ahora veremos un ejemplo para apreciar de formas precisa lo que podemos hacer. El ejemplo estara en base al mismo Template que viene en la instalación de KumbiaPHP donde se muestra la bienvenida y la petición AJAX irá especificamente para mostrar la página de status (link Config). |
− | Antes de continuar veamos el comportamiento al hacer click en el link | + | Antes de continuar veamos el comportamiento al hacer click en el link Config, [http://www.kumbiaphp.com/blog/2009/05/31/spirit_estrena_nueva_bienvenida/ Ver detalles de la Nueva Pantalla de Bienvenida de KumbiaPHP] |
Eso lo cambiaremos por una petición donde no se cargara todo el [[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Ftemplates.2F|Template]] sino solo el [[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Ftemplates.2F|View]] | Eso lo cambiaremos por una petición donde no se cargara todo el [[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Ftemplates.2F|Template]] sino solo el [[KumbiaPHP_Framework_Versión_1.0_Spirit#views.2Ftemplates.2F|View]] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |