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: | ||
<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 | |
− | |||
<source lang="php"> | <source lang="php"> | ||
<?php | <?php | ||
Línea 59: | Línea 58: | ||
$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: | |
hola.phtml | hola.phtml | ||
Línea 77: | Línea 111: | ||
</source> | </source> | ||
− | |||
views/ejemplo | views/ejemplo | ||
<source lang="php"> | <source lang="php"> | ||
Línea 95: | Línea 128: | ||
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. | ||
− | |||
− | |||
[[Categoría:Helpers]] | [[Categoría:Helpers]] | ||
[[Categoría:Tutoriales KumbiaPHP]] | [[Categoría:Tutoriales KumbiaPHP]] |