|
|
Línea 1: |
Línea 1: |
− | == ¿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 [https://sourceforge.net/projects/kphp-breadcrumb/files/breadcrumb.rar/download 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.
| |
− |
| |
− | <source lang="php" line>
| |
− | locale = es_MX
| |
− | routes = On
| |
− | breadcrumb = true
| |
− | </source>
| |
− |
| |
− | ===Crear partial breadcrumb.phtml===
| |
− | Crear en default\app\views\_shared\partials\ el archivo breadcrumb.phtml con el siguiente contenido.
| |
− |
| |
− | <source lang="php">
| |
− | <?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; ?>
| |
− | </source>
| |
− |
| |
− | == Configuraciones al Breadcrumb ==
| |
− |
| |
− | ===$Crumb->separator===
| |
− | (string)Modifica el separador para los item del crumb, por default es ».
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->separator = ' | ';
| |
− | </source>
| |
− |
| |
− | ===$Crumb->class_ul===
| |
− | (string)Nombre de la clase para ul en la lista, por default es NULL.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->class_ul = 'breadcrumb_ul';
| |
− | </source>
| |
− |
| |
− | ===$Crumb->class_separator===
| |
− | (string)Nombre de la clase para li del separador, por default es NULL.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->class_separator 'breadcrumb_li';
| |
− | </source>
| |
− |
| |
− | ===$Crumb->camel_case===
| |
− | (bool)Aplica notación CamelCase(ucwords) a los titulos de los items, por default es true.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->camel_case = true
| |
− | </source>
| |
− |
| |
− | ===$Crumb->upper_case===
| |
− | (bool)Transforma a mayusculas(strtoupper) los titulos de los items, por default es false.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->upper_case = false
| |
− | </source>
| |
− |
| |
− | ===$Crumb->lower_case===
| |
− | (bool)Transforma a minusculas(strtolower) los titulos de los items, por default es false.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->lower_case = false
| |
− | </source>
| |
− |
| |
− | ===$Crumb->cut===
| |
− | (bool)Corta los titulos de los items, por default es false.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->cut = false
| |
− | </source>
| |
− |
| |
− | ===$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.
| |
− |
| |
− | <source lang="php">
| |
− | $Crumb->cut_len_max = 10
| |
− | </source>
| |
− |
| |
− | == Desde el controlador ==
| |
− |
| |
− | ===Modificar el switch del Breadcrumb===
| |
− |
| |
− | Activar la impresion del Breadcrumb.
| |
− |
| |
− | <source lang='php'>
| |
− | Config::set('config.application.breadcrumb', true)
| |
− | </source>
| |
− |
| |
− | Inactivar la impresion del Breadcrumb.
| |
− |
| |
− | <source lang='php'>
| |
− | Config::set('config.application.breadcrumb', false)
| |
− | </source>
| |
− |
| |
− | ===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.
| |
− |
| |
− | [[Archivo:Breadcrumb simple.png]]
| |
− |
| |
− | Ejemplo estilo avanzado, ejemplo tomado de http://pixelcoblog.com/
| |
− |
| |
− | [[Archivo:Breadcrumb style.png]]
| |
− |
| |
− | ----
| |
− |
| |
− | Bueno espero haberme explicado de manera clara, cualquier problema nos vemos en el [http://www.kumbiaphp.com/blog/irc/ IRC].
| |
− |
| |
− | --Saludos [[Usuario:IBet7o|iBet7o]] 05:31 9 ago 2010 (UTC)
| |
− |
| |
− | [[Categoría:Partials]]
| |
− | [[Categoría:Tutoriales KumbiaPHP]]
| |