Diferencia entre revisiones de «JQuery UI en Kumbiaphp Spirit beta2»

De KumbiaPHP Framework Wiki
Línea 68: Línea 68:
 
no olvidar que deben tener habilitado en su proyecto el Jquery
 
no olvidar que deben tener habilitado en su proyecto el Jquery
  
 
+
[[Categoría:Helpers]]
[[Categoría:Tutoriales KumbiaPHP]]
 
 
[[Categoría:Tutoriales KumbiaPHP Beta2]]
 
[[Categoría:Tutoriales KumbiaPHP Beta2]]

Revisión del 02:17 12 mar 2010

Vamos a crear un helper 'Calendar' que se pueda utilizar en cualquier vista de nuestra aplicación. ejemplo

Vamos a empezar a ver como se utiliza.

1° en la vista solo llamamos el helpers y se utiliza de esta forma.

<?php
View::helpers('calendar');
echo Calendar::text('fecha');
?>


ahora como ven es sumamente sencillo de utilizarlo, ahora empezamos a la construcción del helpers.

descargamos el jquery-ui-1.7.2.custom.zip descomprimimos y copiamos los siguientes archivos. creamos la carpeta jquery en css y javascript


development-bundle/themes -> app/public/css/jquery/

development-bundle/ui -> app/public/javascript/jquery/


Helper.

Creamos el archivo en: app/extensions/helpers/calendar.php

 <?php 
  class Calendar{ 
      public static function text($field, $attrs = NULL, $value = NULL){ 
          static $i = false; 
          $code   =   ''; 
          if($i == false){ 
                  $i = true; 
                  $code   =    Tag::css('jquery/themes/ui-lightness/ui.all'); 
                  $code   .=   Tag::js('jquery/ui/ui.core'); 
                  $code   .=   Tag::js('jquery/ui/ui.datepicker');
          } 
          $code   .=   Form::text($field, $attrs, $value); 
          $field  =   str_replace('.', '_', $field); 
          $code   .=  "<script type=\"text/javascript\"> 
                      $(function() { 
                          $(\"#" . $field . "\").datepicker({ 
                          altFormat: 'd/m/yy', 
                          autoSize: true, 
                          dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sábado'], 
                          dayNamesMin: ['Dom', 'Lu', 'Ma', 'Mi', 'Je', 'Vi', 'Sa'], 
                          firstDay: 1, 
                          monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], 
                          monthNamesShort: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'], 
                          dateFormat: 'dd/mm/yy', 
                          changeMonth: true, 
                          changeYear: true}); 
                      }); 
                      </script>"; 
          return $code; 
      } 
  } 
  ?>


no olvidar que deben tener habilitado en su proyecto el Jquery