Integrar KumbiaPHP Spirit con jQuery
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.
Instalar jQuery
Lo primero es descargar la versión mas actual de jQuery, en este caso la versión 1.3.2, una vez descargada se colocaran las librerias en el directorio [app]/public/javascript/jquery/
application.js
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.
jQuery(document).ready(function($) {
$("a.jsShow").live('click' , function(event) {
event.preventDefault();
$(this.rel).show();
});
$("a.jsHide").live('click', function(event) {
event.preventDefault();
$(this.rel).hide();
});
$("a.jsToggle").live('click', function(event) {
event.preventDefault();
$(this.rel).toggle();
});
$("a.jsRemote").live('click', function(event) {
event.preventDefault();
$(this.rel).load(this.href)
});
});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
Ahora se necesita incluir estas librerias en el Template para que comiencen a realizar su trabajo y esto se aprecia en la líneas 7 y 8, muy importante el orden en la que se incluyen ya que el archivo application.js depende de jQuery por ende estas deben estar cargadas para cuando este archivo iniciado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-type' content='text/html; charset=<?php echo APP_CHARSET ?>' />
<title>KumbiaPHP web & app Framework</title>
<?php echo stylesheet_link_tag('bienvenida') ?>
<?php echo javascript_include_tag('jquery/jquery-1.3.2.min') ?>
<?php echo javascript_library_tag('application') ?>
<?php echo stylesheet_link_tag('style') ?>
<?php echo Kumbia::stylesheet_link_tags(); ?>
</head>
<body>
<div id='content'>
<div id='head'>
<h1 id='logo'>KumbiaPHP</h1><div id='info-app'>web & app Framework versión <?php echo Kumbia::KUMBIA_VERSION ?></div>
<div class='alignright'>
<p id='config'>
<span class='app'><?php echo APP ?></span>
<?php echo link_to('status/', 'Config', 'title: Ver configuración de '.APP) ?>
</p>
</div>
</div>
<?php View::content(); ?>
<?php View::partial('kumbia/footer') ?>
</div>
</body>
</html>