Edición de «Helper Tabs»
De KumbiaPHP Framework Wiki
Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.
Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.
| Revisión actual | Tu texto | ||
| Línea 1: | Línea 1: | ||
| − | + | '''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 | + | 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 | 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: | |
Agregamos: | Agregamos: | ||
| − | |||
<?php echo javascript_include_tag('jquery/jquery-1.4.2.min') ?> | <?php echo javascript_include_tag('jquery/jquery-1.4.2.min') ?> | ||
<?php echo javascript_include_tag('jquery/ui/ui.core'); ?> | <?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*/ | <?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 | <?php | ||
class Tabs{ | class Tabs{ | ||
| Línea 59: | Línea 56: | ||
$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; | ||
| + | } | ||
} | } | ||
?> | ?> | ||
| − | |||
| − | + | Creamos dos partials: | |
hola.phtml | hola.phtml | ||
| − | |||
<?php echo $parameters['valor']; ?> | <?php echo $parameters['valor']; ?> | ||
| − | |||
chao.phtml | chao.phtml | ||
| − | |||
<?php echo $parameters['valor']; ?> | <?php echo $parameters['valor']; ?> | ||
| − | |||
| − | |||
| − | + | $parameters tiene todas las variables o modelos que queremos enviar al partial | |
| + | |||
views/ejemplo | views/ejemplo | ||
| − | |||
<?php | <?php | ||
View::helpers('tabs'); /* incluimos el helper*/ | View::helpers('tabs'); /* incluimos el helper*/ | ||
| Línea 95: | Línea 121: | ||
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); | ||
?> | ?> | ||
| − | + | ||
Probamos el programa ejecutándolo desde ejemplo. | Probamos el programa ejecutándolo desde ejemplo. | ||
| − | |||
| − | |||
[[Categoría:Helpers]] | [[Categoría:Helpers]] | ||
[[Categoría:Tutoriales KumbiaPHP]] | [[Categoría:Tutoriales KumbiaPHP]] | ||
