Helper Tabs
De KumbiaPHP Framework Wiki
Contenido |
[editar] Helper Tabs
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.
[editar] 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*/
[editar] 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; } } ?>
[editar] 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 */
[editar] 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.
[editar] Screenshots
