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 == | ||
Línea 42: | Línea 38: | ||
Algo a comentar, el paquete de jQuery-ui tiene dentro de la carpeta '''themes''' (miapp/public/css/themes) dos carpetas que son '''base''' y '''ui-lightness''', puedes usar el archivo '''ui.all.js''' de la carpeta '''base''' o de la carpeta '''ui-lightness'''. | Algo a comentar, el paquete de jQuery-ui tiene dentro de la carpeta '''themes''' (miapp/public/css/themes) dos carpetas que son '''base''' y '''ui-lightness''', puedes usar el archivo '''ui.all.js''' de la carpeta '''base''' o de la carpeta '''ui-lightness'''. | ||
− | |||
− | |||
− | |||
− | |||
<source lang=php> | <source lang=php> | ||
Línea 65: | Línea 57: | ||
− | 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 94: | ||
== 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 104: | ||
//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 139: | Línea 127: | ||
Como podemos ver es muy fácil tener una aplicación con componetes dinámicos agradables, rápidos y personalizables. Del mismo modo que se agrego este datapicker se puede hacer con los otros componentes que incluye JQuery UI. Solo es cuestión de subirlos a los directorios indicados, incluirlos apropiadamente en nuestros templates, crear un partial e incluirlo en la vista que lo requiera. | Como podemos ver es muy fácil tener una aplicación con componetes dinámicos agradables, rápidos y personalizables. Del mismo modo que se agrego este datapicker se puede hacer con los otros componentes que incluye JQuery UI. Solo es cuestión de subirlos a los directorios indicados, incluirlos apropiadamente en nuestros templates, crear un partial e incluirlo en la vista que lo requiera. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
[[Categoría:Tutoriales KumbiaPHP]] | [[Categoría:Tutoriales KumbiaPHP]] | ||
[[Categoría:Partials]] | [[Categoría:Partials]] | ||
[[Categoría:jQuery]] | [[Categoría:jQuery]] |