Edición de «JQuery UI en Kumbiaphp Spirit»
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: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
== JQuery UI == | == JQuery UI == | ||
Línea 13: | Línea 8: | ||
== Descargando Jquery UI == | == Descargando Jquery UI == | ||
− | Primero que todo debemos descargar Jquery UI. Para ello vamos a su [http://jqueryui.com/download seccion de descargas] Y personalizamos la descarga segun las necesidades de nuestra APP. ya sea que necesitemos un acordeon, un widwled tabs o un datapicker necesitamos incluir en la descarga el UI Core. Y seleccionar el tema que acompañara nuestra descarga. | + | Primero que todo debemos descargar Jquery UI. Para ello vamos a su [http://jqueryui.com/download seccion de descargas] Y personalizamos la descarga segun las necesidades de nuestra APP. ya sea que necesitemos un acordeon, un widwled tabs o un datapicker necesitamos incluir en la descarga el UI Core. Y seleccionar el tema que acompañara nuestra descarga. (Actualmente esta disponible la version (1.7.2) |
− | "Para este tutorial incluiremos un Datapicker | + | "Para este tutorial incluiremos un Datapicker con el tema Flick y el UI Core." |
En los archivos descargados encontramos 3 directorios: | En los archivos descargados encontramos 3 directorios: | ||
Línea 22: | Línea 17: | ||
* development-bundle (Demos y librerias necesarias para implementar) | * development-bundle (Demos y librerias necesarias para implementar) | ||
* css (Themes) | * css (Themes) | ||
+ | |||
== Subiendo Jquery UI a Kumbiaphp == | == Subiendo Jquery UI a Kumbiaphp == | ||
En nuestra App de kumbiaphp debemos subir los archivos necesarios para ejecutar el datapicker | En nuestra App de kumbiaphp debemos subir los archivos necesarios para ejecutar el datapicker | ||
− | |||
− | |||
* Subir el directorio development-bundle/ui a -> miapp/public/javascript | * Subir el directorio development-bundle/ui a -> miapp/public/javascript | ||
Línea 32: | Línea 26: | ||
* Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a | * Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a | ||
-> miapp/public/javascript | -> miapp/public/javascript | ||
+ | |||
+ | |||
== Incluyendo librerias de JQuery UI a Kumbiaphp == | == Incluyendo librerias de JQuery UI a Kumbiaphp == | ||
Línea 41: | Línea 37: | ||
Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar. | Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar. | ||
− | + | <source lang=php line> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | <source lang=php> | ||
<head> | <head> | ||
<?php | <?php | ||
− | + | echo stylesheet_link_tag('themes/flicks/ui.all'); | |
− | echo stylesheet_link_tag('themes/ | ||
echo stylesheet_link_tags(); | echo stylesheet_link_tags(); | ||
− | echo javascript_include_tag(' | + | echo javascript_include_tag('jquery-1.3.2'); |
− | echo javascript_include_tag(' | + | echo javascript_include_tag('ui/ui.core'); |
− | echo javascript_include_tag(' | + | echo javascript_include_tag('ui/ui.datepicker'); |
?> | ?> | ||
Línea 65: | Línea 54: | ||
− | En el directorio miapp/views/partials crearemos un archivo con extencion .pthml por ejemplo datapicker_alter.phtml en el que incluiremos la llamada al componente que hemos subido de JQuery UI | + | En el directorio miapp/views/partials crearemos un archivo con extencion .pthml por ejemplo datapicker_alter.phtml en el que incluiremos la llamada al componente que hemos subido de JQuery UI |
<source lang=javascript> | <source lang=javascript> | ||
Línea 102: | Línea 91: | ||
== Usando el Partial anterior == | == Usando el Partial anterior == | ||
− | En una vista que tengamos podemos usar el partial anterior de esta forma | + | En una vista que tengamos podemos usar el partial anterior de esta forma |
<source lang=php line> | <source lang=php line> | ||
− | |||
echo "<span class='label'>Date:</span>"; | echo "<span class='label'>Date:</span>"; | ||
echo text_field_tag('name: user.fnac','id: datepicker'); | echo text_field_tag('name: user.fnac','id: datepicker'); | ||
Línea 113: | Línea 101: | ||
//finalmente incluimos el partial | //finalmente incluimos el partial | ||
View::partial('datapicker_alter'); | View::partial('datapicker_alter'); | ||
− | |||
</source> | </source> | ||
− | |||
− | |||
Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia: | Y ahora usando el partial con parámetro y escrito de la forma correcta usando los helpers de kumbia: | ||
Línea 130: | Línea 115: | ||
por una _ con lo que debemos prestar atención al nombre del campo. | por una _ con lo que debemos prestar atención al nombre del campo. | ||
**/ | **/ | ||
− | echo View::partial('datapicker_alter', false, array('datepicker' => array('#infobasica_fechanac', '#field2' | + | echo View::partial('datapicker_alter', false, array('datepicker' => array('#infobasica_fechanac', '#field2')); |
// con el array('#infobasica_fechanac', '#field2') estamos enviando dos id de dos campos diferentes que requieren usar del datepicker (Mejora realizada por cachi) | // con el array('#infobasica_fechanac', '#field2') estamos enviando dos id de dos campos diferentes que requieren usar del datepicker (Mejora realizada por cachi) | ||
Línea 138: | Línea 123: | ||
[[Archivo: Datapicker-jqueryui.jpg]] | [[Archivo: Datapicker-jqueryui.jpg]] | ||
− | Como podemos ver es muy | + | Como podemos ver es muy facil tener una aplicacion con componetes dinamicos agradables, rapidos y personalizables. Del mismo modo que se agrego este datapicker se ouede hacer con los otros componentes que incluye JQuery UI. Solo es cuestion de subirlos a los directorios indicados, incluirlos apropiadamente en nuestros templates, crear un partial e incluirlo en la vista que lo requiera. |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
[[Categoría:jQuery]] | [[Categoría:jQuery]] |