Helper Tabs

Helper Tabs Este es un helper que permite agregar solapas en la vista principal de nuestro sitio web usando jquery-ui. El ejemlo que realizaremos es este: http://jqueryui.com/demos/tabs/ y trabaja con partiales.

Primero debemos descargar el jquery-ui 1.8.1 http://jqueryui.com/download

Una vez descargado, el directorio "development-bundle/ui/" lo copiamos dentro de public/javascript/jquery/ui. El directorio "development-bundle/themes" en public/css/themes. En el directorio js existen 2 archivos jquery-1.4.2.min.js y jquery-ui-1.8.1.custom.min.js, debemos copiarlos en el directorio public/javascript/jquery.

Luego procedemos a editar el Template principal que usamos en la app para colocar el jquery: Agregamos: <?php echo javascript_include_tag('jquery/jquery-1.4.2.min') ?> <?php echo javascript_include_tag('jquery/ui/ui.core'); ?> <?php echo stylesheet_link_tag('themes/start/jquery.ui.all'); ?> /* podemos usar cualquier otro themes de los q hay en el directorio*/

Creamos un archivo en el directorio: " extensions/helpers/ " llamado tabs.php <?php class Tabs{

   /**
    *Tabs clasicas
    */
   public static function open($data){
       static $sw = true;
       $code = ;
       if($sw){
           $code = self::js();
           $sw=false;
       }

$code .= '

'.PHP_EOL; $code .= '

'.PHP_EOL; $code .= '

'.PHP_EOL; foreach($data as $key => $value){ $code .= '
• <a href="#tabs-' . $key . '">' . $value['title'] . '</a>
'.PHP_EOL; } $code .= '

'.PHP_EOL;

       foreach($data as $key => $value){

$code .= '

'.PHP_EOL;

ob_start();

           View::partial($value['partial'], false, array('parameters' => $value['parameters']));

$code .= ob_get_clean().PHP_EOL;

$code .= '

'.PHP_EOL;

       }

$code .= '

'.PHP_EOL; $code .= '

'.PHP_EOL;

       return $code;
   }
   private static function js(){
       $code = ;
       //$code  =   javascript_include_tag('jquery/ui/ui.core');
       $code .=   javascript_include_tag('jquery/ui/jquery.ui.widget');
       $code .=   javascript_include_tag('jquery/ui/jquery.ui.tabs');
       $code .= '<script type="text/javascript">'.PHP_EOL;
       $code .= '$(function() {'.PHP_EOL;
       $code .= '$("#tabs").tabs();'.PHP_EOL;
       $code .= '});'.PHP_EOL;
       $code .= '</script>'.PHP_EOL;
       return $code;
   }
   public static function acordion($data){
       static $sw = true;
       $code = ;
       if($sw){
           $code = self::jsAcordion();
           $sw=false;
       }

$code .= '

'.PHP_EOL; $code .= '

'.PHP_EOL;

       foreach($data as $key => $value){

$code .= '

<a href="#">' . $value['title'] . '</a>

'.PHP_EOL; $code .= '

'.PHP_EOL; $code .= '

'; ob_start(); View::partial($value['partial'], false, array('parameters' => $value['parameters'])); $code .= ob_get_clean().PHP_EOL; $code .= '

'; $code .= '

'.PHP_EOL;

       }

$code .= '

'.PHP_EOL; $code .= '

'.PHP_EOL;

       return $code;
   }    
   private static function jsAcordion(){
       $code = ;
       //$code  =   Tag::js('jquery/ui/ui.core');
       $code .=   javascript_include_tag('jquery/ui/jquery.ui.widget');
       $code .=   javascript_include_tag('jquery/ui/jquery.ui.accordion');
       $code .= '<script type="text/javascript">'.PHP_EOL;
       $code .= '$(function() {'.PHP_EOL;
       $code .= '$("#accordion").accordion();'.PHP_EOL;
       $code .= '});'.PHP_EOL;
       $code .= '</script>'.PHP_EOL;
       return $code;
   }  

} ?>

Creamos dos partials:

hola.phtml <?php echo $parameters['valor']; ?>

chao.phtml <?php echo $parameters['valor']; ?>

$parameters tiene todas las variables o modelos que queremos enviar al partial

views/ejemplo <?php View::helpers('tabs'); /* incluimos el helper*/ $tabs[] = array('title' => 'HOLA', 'partial' => 'hola',

               'parameters' => array(
                                     'valor' => 'Hola Mundo'
                                     ));

$tabs[] = array('title' => 'CHAO', 'partial' => 'chao',

               'parameters' => array(
                                     'valor' => 'Chao Mundo'
                                     ));

echo Tabs::open($tabs); /* creamos los tabs, tabs es un array,

                     que contiene un titulo, un partial, y 
                     los parametros a enviar a ese partial  */

echo Tabs::acordion($tabs); ?>

Probamos el programa ejecutándolo desde ejemplo.