Diferencia entre revisiones de «Helper Tabs»

De KumbiaPHP Framework Wiki
 
(No se muestran 4 ediciones intermedias de 2 usuarios)
Línea 1: Línea 1:
'''Helper Tabs'''
+
== Helper Tabs ==
 
Este es un helper que  permite agregar solapas en la vista principal de nuestro sitio web usando jquery-ui.
 
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.
+
El ejemplo 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
 
Primero debemos descargar el jquery-ui 1.8.1  http://jqueryui.com/download
Línea 8: Línea 8:
 
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.
 
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:
+
=== Procedemos a editar el Template principal que usamos en la app para colocar el jquery ===
 
Agregamos:
 
Agregamos:
 
<source lang="php">
 
<source lang="php">
Línea 15: Línea 15:
 
<?php echo stylesheet_link_tag('themes/start/jquery.ui.all'); ?> /* podemos usar cualquier otro themes de los q hay en el directorio*/
 
<?php echo stylesheet_link_tag('themes/start/jquery.ui.all'); ?> /* podemos usar cualquier otro themes de los q hay en el directorio*/
 
</source>
 
</source>
Creamos un archivo en el directorio: " extensions/helpers/ " llamado tabs.php
+
 
 +
=== Creamos un archivo en el directorio: " extensions/helpers/ " llamado tabs.php ===
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
Línea 58: Línea 59:
 
         $code .= '</script>'.PHP_EOL;
 
         $code .= '</script>'.PHP_EOL;
 
         return $code;
 
         return $code;
     }
+
     }    
    public static function acordion($data){
 
        static $sw = true;
 
        $code = '';
 
        if($sw){
 
            $code = self::jsAcordion();
 
            $sw=false;
 
        }
 
        $code .= '<div class="demo">'.PHP_EOL;
 
        $code .= '<div id="accordion">'.PHP_EOL;
 
        foreach($data as $key => $value){
 
            $code .= '<h3><a href="#">' . $value['title'] . '</a></h3>'.PHP_EOL;
 
            $code .= '<div>'.PHP_EOL;
 
            $code .= '<p>';
 
    ob_start();
 
            View::partial($value['partial'], false, array('parameters' => $value['parameters']));
 
    $code .=  ob_get_clean().PHP_EOL;
 
            $code .= '</p>';
 
            $code .= '</div>'.PHP_EOL;
 
        }
 
        $code .= '</div>'.PHP_EOL;
 
        $code .= '</div>'.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;
 
    } 
 
 
}
 
}
 
?>
 
?>
 
</source>
 
</source>
  
Creamos dos partials:
+
=== Creamos dos partials ===
  
 
hola.phtml
 
hola.phtml
Línea 111: Línea 77:
 
</source>
 
</source>
  
 +
=== Creamos la vista ===
 
views/ejemplo
 
views/ejemplo
 
<source lang="php">
 
<source lang="php">
Línea 128: Línea 95:
 
                       que contiene un titulo, un partial, y  
 
                       que contiene un titulo, un partial, y  
 
                       los parametros a enviar a ese partial  */
 
                       los parametros a enviar a ese partial  */
echo Tabs::acordion($tabs);
 
 
?>
 
?>
 
</source>
 
</source>
 
Probamos el programa ejecutándolo desde ejemplo.
 
Probamos el programa ejecutándolo desde ejemplo.
  
 +
===Screenshots===
 +
[[Archivo:Tabs.png]]
  
 
[[Categoría:Helpers]]   
 
[[Categoría:Helpers]]   
 
[[Categoría:Tutoriales KumbiaPHP]]
 
[[Categoría:Tutoriales KumbiaPHP]]

Revisión actual del 15:52 28 may 2010

Helper Tabs[editar]

Este es un helper que permite agregar solapas en la vista principal de nuestro sitio web usando jquery-ui. El ejemplo 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.

Procedemos a editar el Template principal que usamos en la app para colocar el jquery[editar]

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[editar]

<?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[editar]

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[editar]

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[editar]

Tabs.png