Breadcrumb

De KumbiaPHP Framework Wiki

¿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 Esta clase es para beta2 pero para los que usan beta1, sólo han de cambiar la linea 320 el Html::link() por un link_to().

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
    Load::lib('breadcrumb');
    $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 = '&nbsp;|&nbsp;';

$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::add($title, string $url)

Agrega un crumb al final del Breadcrumb.

string $title => Titulo del crumb.

string $url => URL destino.

Breadcrumb::update($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.

Breadcrumb simple.png

Ejemplo estilo avanzado, ejemplo tomado de http://pixelcoblog.com/

Breadcrumb style.png


Bueno espero haberme explicado de manera clara, cualquier problema nos vemos en el IRC.

--Saludos iBet7o 05:31 9 ago 2010 (UTC)