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

De KumbiaPHP Framework Wiki
(Blanqueada la página)
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
Vamos a crear un helper 'Calendar' que se pueda utilizar en cualquier vista de nuestra aplicación. [http://jqueryui.com/demos/datepicker/ ejemplo]
 
  
Vamos a empezar a ver como se utiliza.
 
 
1° en la vista solo llamamos el helpers y se utiliza de esta forma.
 
 
<source lang="php">
 
<?php
 
View::helpers('calendar');
 
echo Calendar::text('fecha');
 
?>
 
</source>
 
 
 
ahora como ven es sumamente sencillo de utilizarlo, ahora empezamos a la construcción del helpers.
 
 
descargamos el [http://jqueryui.com/download 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
 
<source lang="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;
 
      }
 
  }
 
  ?>
 
</source>
 
 
 
 
no olvidar que deben tener habilitado en su proyecto el Jquery
 

Revisión actual del 02:19 12 mar 2010