Diferencia entre revisiones de «Breadcrumb BETA 2»
Línea 140: | Línea 140: | ||
string $url => URL destino. | string $url => URL destino. | ||
+ | |||
+ | == Imagenes de ejemplo == | ||
+ | Ejemplo estilo sencillo. | ||
+ | |||
+ | [[Archivo:Breadcrumb simple.png]] | ||
+ | |||
+ | Ejemplo estilo avanzado, ejemplo tomado de http://pixelcoblog.com/ | ||
+ | |||
+ | [[Archivo:Breadcrumb style.png]] | ||
---- | ---- |
Revisión del 06:16 9 ago 2010
Sumario
¿Que es un Breadcrumb?
El Breadcrumb es un elemento de orientación dentro del sitio, por lo regular este elemento se encuentra posicionado entre la cabezera y en contentenido principal del sitio.
El Breadcrumb ofrece al usuario su ubicación actual dentro del sitio. El término viene de la pista de migas de pan que dejan Hansel y Gretel en el popular cuento.
En ejemplo de su vista en el sitio web, seria de la siguiente manera.
Home > Sección Página > Subsección página o Portada del sitio > Sección del sitio > Página de la subsección
Tipos de Breadcrumb
Existen 3 tipos:
- Ruta de acceso: Son dinámicas y muestran la ruta que el usuario ha empleado para llegar a una página.
- Ubucación: Son de tipo estatico e informa del lugar, dentro del sitio web, donde se encuentra la página y es independiente a la navegación que el usuario a seguido
- Atributo: Muestran información que categoriza la página actual.
Instalación
Descarga de la clase
Descargar la clase del la siguiente liga Breadcrumb para kumbiaPHP
Instalación de la clase
Descomprimir el .rar y pegar el archivo en la siguiente ruta default\app\libs\
Ejemplo Breadcrumb para kumbiaPHP
Modificar el archivo de configuración
Agregamos al archivo default\app\config\config.ini el switch breadcrumb que activa(true) o inactiva(false) la impresion del partial breadcrumb.
locale = es_MX
routes = On
breadcrumb = true
Crear partial breadcrumb.phtml
Crear en default\app\views\_shared\partials\ el archivo breadcrumb.phtml con el siguiente contenido.
<?php if(Config::get('config.application.breadcrumb')): ?>
<div id="breadcrumb">
<?php
$Crumb = new Breadcrumb();
$Crumb->addCrumb(0, _('Inicio'), Router::get('module'));
$Crumb->addCrumb(1, Router::get('controller'), Router::get('module') . '/' . Router::get('controller'));
$Crumb->addCrumb(2, Router::get('action'), Router::get('module') . '/' . Router::get('controller') . '/' . Router::get('action'));
echo $Crumb->display();
?>
</div>
<?php endif; ?>
Configuraciones al Breadcrumb
$Crumb->separator
(string)Modifica el separador para los item del crumb, por default es ».
$Crumb->separator = ' | ';
$Crumb->class_ul
(string)Nombre de la clase para ul en la lista, por default es NULL.
$Crumb->class_ul = 'breadcrumb_ul';
$Crumb->class_separator
(string)Nombre de la clase para li del separador, por default es NULL.
$Crumb->class_separator 'breadcrumb_li';
$Crumb->camel_case
(bool)Aplica notación CamelCase(ucwords) a los titulos de los items, por default es true.
$Crumb->camel_case = true
$Crumb->upper_case
(bool)Transforma a mayusculas(strtoupper) los titulos de los items, por default es false.
$Crumb->upper_case = false
$Crumb->lower_case
(bool)Transforma a minusculas(strtolower) los titulos de los items, por default es false.
$Crumb->lower_case = false
$Crumb->cut
(bool)Corta los titulos de los items, por default es false.
$Crumb->cut = false
$Crumb->cut_len_max
(int)Longitud maxima del titulo, si esta activado $Crumb->cut evalua si la longitud del titulo es mayor a $Crumb->cut_len_max para realizar el corte, por default es 10.
$Crumb->cut_len_max = 10
Desde el controlador
Modificar el switch del Breadcrumb
Activar la impresion del Breadcrumb.
Config::set('config.application.breadcrumb', true)
Inactivar la impresion del Breadcrumb.
Config::set('config.application.breadcrumb', false)
Breadcrumb::_addCrumb($title, string $url)
Agrega un crumb al final del Breadcrumb.
string $title => Titulo del crumb.
string $url => URL destino.
Breadcrumb::_updateCrumb($key, $title, $url)
Actualiza un crumb siempre y cuando este definido, para respetar el valor original de title o url se debe pasar como parametro un punto(.).
int $key => Index del crumb.
string $title => Titulo del crumb.
string $url => URL destino.
Imagenes de ejemplo
Ejemplo estilo sencillo.
Ejemplo estilo avanzado, ejemplo tomado de http://pixelcoblog.com/
Bueno espero haberme explicado de manera clara, cualquier problema nos vemos en el IRC.
--Saludos iBet7o 05:31 9 ago 2010 (UTC)