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 .= '<div class="demo">'.PHP_EOL;
        $code .= '<div id="tabs">'.PHP_EOL;
        $code .= '<ul>'.PHP_EOL;
        foreach($data as $key => $value){
            $code .= '<li><a href="#tabs-' . $key . '">' . $value['title'] . '</a></li>'.PHP_EOL;
        }
        $code .= '</ul>'.PHP_EOL;
        foreach($data as $key => $value){
            $code .= '<div id="tabs-' . $key . '">'.PHP_EOL;
	    ob_start();
            View::partial($value['partial'], false, array('parameters' => $value['parameters']));
	    $code .=  ob_get_clean().PHP_EOL;
            $code .= '</div>'.PHP_EOL;
        }
        $code .= '</div>'.PHP_EOL;
        $code .= '</div>'.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;
    }      
}
?>

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 */

Creamos la vista

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  */
?>

Probamos el programa ejecutándolo desde ejemplo.

Screenshots