Diferencia entre revisiones de «JQuery UI en Kumbiaphp Spirit»
(JQuery UI en Kumbiaphp Spirit) |
|||
| Línea 63: | Línea 63: | ||
//Aqui damos los parametros que requiera el componente | //Aqui damos los parametros que requiera el componente | ||
altFormat: 'DD, d MM, yy', //el formato | altFormat: 'DD, d MM, yy', //el formato | ||
| + | changeMonth: true, //afirmamos que se pueda cambiar de mes | ||
| + | changeYear: true}); //afirmamos que se pueda cambiar de año | ||
| + | }); | ||
| + | </script> | ||
| + | </source> | ||
| + | |||
| + | |||
| + | Otra versión del partial para que acepte el id del datapicker como parámetro. | ||
| + | |||
| + | <source lang=javascript> | ||
| + | <script type="text/javascript"> | ||
| + | $(function() { | ||
| + | //donde datepicker es el ID del input que se asociara al componente datapicker | ||
| + | $("#<?=$datepicker?>").datepicker({ | ||
| + | // Aqui damos los parametros que requiera el componente - Añadida traducción al español. | ||
| + | dateFormat: 'dd-mm-yy', | ||
| + | firstDay: 1, | ||
| + | monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], | ||
| + | monthNamesShort: ['En','Feb','Mar','Abr','May','Jun','Jul','Ag','Sep','Oct','Nov','Dic'], | ||
| + | dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'], | ||
changeMonth: true, //afirmamos que se pueda cambiar de mes | changeMonth: true, //afirmamos que se pueda cambiar de mes | ||
changeYear: true}); //afirmamos que se pueda cambiar de año | changeYear: true}); //afirmamos que se pueda cambiar de año | ||
Revisión del 17:16 11 oct 2009
Sumario
JQuery UI
JQuery UI es un set de interacciones y widgets personalizables escritos en base a la librería jQuery. se puede usar para construir aplicaciones web altamente interactivas; Agregando JQuery UI a nuestras app realizadas con Kumbiaphp podremos brindar una interfaz agradable, facil de manejar y con unos cuantos efectos asombrosos gracias a sus componentes. Veamos como podemos darle uso en Kumbiaphp.
Podemos ver demos y temas disponibles para descargar. Adicionalmente se dispone de una herramienta online para crear temas y descargarlos se llama jQuery UI ThemeRoller Developer Tool. Su uso es intuitivo asi que no explicare mucho sobre eso.
Descargando Jquery UI
Primero que todo debemos descargar Jquery UI. Para ello vamos a su 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 con el tema Flick y el UI Core."
En los archivos descargados encontramos 3 directorios:
* js (libreria Jquery) * development-bundle (Demos y librerias necesarias para implementar) * css (Themes)
Subiendo Jquery UI a Kumbiaphp
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/themes a-> miapp/public/css * Si por alguna razon no tenemos JQuery en nuestra app de Kumbia debemos subir esta libreria a -> miapp/public/javascript
Incluyendo librerias de JQuery UI a Kumbiaphp
Existen varias formas de agregar las librerias de Jquery UI a nuestra app; Una de ellas es usando el helper javascript_include_tag(); en nuestro template.
Si lo hacemos asi debemos trabajar en el template que se encuentra en miapp/views/templates/mitemplate.phtml o uno que nosotros hallamos creado.
Por defecto Kumbiaphp trae un template llamado default.phtml si no hemos creado uno nosotro usaremos este para trabajar.
<head>
<?php
echo stylesheet_link_tag('themes/flicks/ui.all');
echo stylesheet_link_tags();
echo javascript_include_tag('jquery-1.3.2');
echo javascript_include_tag('ui/ui.core');
echo javascript_include_tag('ui/ui.datepicker');
?>
</head>Partial para el Datepicker
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
<script type="text/javascript">
$(function() {
//donde datepicker es el ID del input que se asociara al componente datapicker
$("#datepicker").datepicker({
//Aqui damos los parametros que requiera el componente
altFormat: 'DD, d MM, yy', //el formato
changeMonth: true, //afirmamos que se pueda cambiar de mes
changeYear: true}); //afirmamos que se pueda cambiar de año
});
</script>
Otra versión del partial para que acepte el id del datapicker como parámetro.
<script type="text/javascript">
$(function() {
//donde datepicker es el ID del input que se asociara al componente datapicker
$("#<?=$datepicker?>").datepicker({
// Aqui damos los parametros que requiera el componente - Añadida traducción al español.
dateFormat: 'dd-mm-yy',
firstDay: 1,
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['En','Feb','Mar','Abr','May','Jun','Jul','Ag','Sep','Oct','Nov','Dic'],
dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
changeMonth: true, //afirmamos que se pueda cambiar de mes
changeYear: true}); //afirmamos que se pueda cambiar de año
});
</script>Usando el Partial anterior
En una vista que tengamos podemos usar el partial anterior de esta forma
echo "<span class='label'>Date:</span>";
echo text_field_tag('name: user.fnac','id: datepicker');
//con el id datepicker asociamos el componente nombrado en el partial. Si queremos
//usar otro datepicker en el mismo formulario debemos colocar un id diferente en
//el form y el mismo en el partial
//finalmente incluimos el partial
View::partial('datapicker_alter');
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.
