Edición de «Breadcrumb BETA 2»
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: | ||
+ | == ¿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]] |