Árboles en Twitter Bootstrap [cerrado]

108

He estado tratando de trabajar en la creación de un árbol (como un árbol de directorios) que use tanto CSS y tan poco JS como sea posible (solo para estados, etc.), y quiero saber si hay algunos buenos complementos de árbol existentes para bootstrap o bootstrap de jquery-ui .


Como referencia o para personas confundidas acerca de esta pregunta, estoy buscando algo como dynatree para bootstrap.

Kumarharsh
fuente

Respuestas:

181

Sobre la base de CSS de Vitaliy y jQuery de Mehmet , cambié las aetiquetas a spanetiquetas e incorporé algunas Glyphicons e insignias en mi versión de un widget de árbol Bootstrap .

Ejemplo: mi opinión sobre un widget de árbol Bootstrap

Para obtener crédito adicional, he creado un Icono de Github proyecto de GitHub para alojar el código jQuery y LESS que se utiliza para agregar este componente de árbol a Bootstrap. Consulte la documentación del proyecto en http://jhfrench.github.io/bootstrap-tree/docs/example.html .

Alternativamente, aquí está la fuente MENOS para generar ese CSS (el JS se puede recoger de jsFiddle ):

@import "../../../external/bootstrap/less/bootstrap.less"; /* substitute your path to the bootstrap.less file */
@import "../../../external/bootstrap/less/responsive.less"; /* optional; substitute your path to the responsive.less file */

/* collapsable tree */
.tree {
    .border-radius(@baseBorderRadius);
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
    background-color: lighten(@grayLighter, 5%);
    border: 1px solid @grayLight;
    margin-bottom: 10px;
    max-height: 300px;
    min-height: 20px;
    overflow-y: auto;
    padding: 19px;
    a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
    }
    li {
        list-style-type: none;
        margin: 0px 0;
        padding: 4px 0px 0px 2px;
        position: relative;
        &::before, &::after {
            content: '';
            left: -20px;
            position: absolute;
            right: auto;
        }
        &::before {
            border-left: 1px solid @grayLight;
            bottom: 50px;
            height: 100%;
            top: 0;
            width: 1px;
        }
        &::after {
            border-top: 1px solid @grayLight;
            height: 20px;
            top: 13px;
            width: 23px;
        }
        span {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 1px solid @grayLight;
            border-radius: 5px;
            display: inline-block;
            line-height: 14px;
            padding: 2px 4px;
            text-decoration: none;
        }
        &.parent_li > span {
            cursor: pointer;
            /*Time for some hover effects*/
            &:hover, &:hover+ul li span {
                background: @grayLighter;
                border: 1px solid @gray;
                color: #000;
            }
        }
        /*Remove connectors after last child*/
        &:last-child::before {
            height: 30px;
        }
    }
    /*Remove connectors before root*/
    > ul > li::before, > ul > li::after {
        border: 0;
    }
}
Jeromy francés
fuente
bien hecho. Excepto, por supuesto, el comportamiento extraño de los hijos .parent_lique pierden su color de fondo y se vuelven grises cuando se pasa el cursor sobre su padre (en su segundo árbol).
Kumarharsh
Gracias @Harsh. El comportamiento de desplazamiento que le parece extraño sigue la programación de Vitaliy para darle al usuario un indicador visual de qué nodos se colapsarán.
Jeromy French
1
@JeromyFrench Este árbol tiene una experiencia muy agradable y fluida. Exactamente lo que buscaba cuando busqué. Buen trabajo.
Nathan Moos
5
gracias por el codigo. ¿Cómo se colapsa por defecto? cuando visite la página quiero que se contraiga? ¿usted me podría ayudar? Gracias.
Erdem Ece
5
jsfiddle.net/jayhilwig/hv8vU :: Actualicé el código y bifurqué un nuevo violín aquí para bootstrap 3.0:
jayseattle
79

¿Puedes creer que la vista de árbol en la imagen a continuación no usa JavaScript, sino que se basa solo en CSS3? Echa un vistazo a este TreeView CSS3 , que es bueno con Twitter BootStrap:

Vista de árbol

Puede obtener más información sobre esto aquí http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ .

Praveen Kumar Purushothaman
fuente
wow ... esta es una buena ... tendré que investigar esto ... gracias ...
kumarharsh
1
@Harsh Claro, está listo para iniciar y, por favor, acepte mi respuesta si es útil. :) PD: Lo estamos usando. :)
Praveen Kumar Purushothaman
La solución parece buena, pero hay algunas características que queríamos y no se suministran en esta versión, como el resaltado de ramas, etc. Pero de todos modos, es un muy buen ejemplo de cómo hacer el estilo del árbol
kumarharsh
1
encontré un buen ejemplo thecssninja.com/demo/css_tree
surya
1
Vale la pena señalar que la publicación del blog a la que se hace referencia en la respuesta contiene CSS simple, que no me funciona, pero la demostración real contiene CSS más complicado (y no explicado).
Robin Green
53

Si alguien quiere una versión vertical de la vista de árbol de la respuesta de Harsh, puede ahorrar algo de tiempo:

http://jsfiddle.net/Fh47n/

.tree li {
    margin: 0px 0;

    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}

.tree li::before{
    content: '';
    position: absolute; 
    top: 0;
    width: 1px; 
    height: 100%;
    right: auto; 
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after{
    content: '';
    position: absolute; 
    top: 30px; 
    width: 25px; 
    height: 20px;
    right: auto; 
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a{
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after{
    border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before{ 
      height: 30px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}
Vitaliy Bychik
fuente
1
Simple y elegante. Upvoted :)
thefourtheye
1
¡La solución perfecta!
CORSAIR
¡Vaya, gran solución y fácilmente extensible!
rkallensee
¿Dónde está la funcionalidad de expansión de colapso?
Syed Aqeel Ashiq
41

Para aquellos que aún buscan un árbol con CSS3, este es un código fantástico que encontré en la red:

http://thecodeplayer.com/walkthrough/css3-family-tree

HTML

<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Grand Child</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a></li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

* {margin: 0; padding: 0;}

.tree ul {
  padding-top: 20px; position: relative;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left; text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
  content: '';
  position: absolute; top: 0; right: 50%;
  border-top: 1px solid #ccc;
  width: 50%; height: 20px;
}
.tree li::after{
  right: auto; left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

.tree li a{
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}

PD: además del código, también me gusta la forma en que el sitio lo muestra en acción ... realmente innovador.

Kumarharsh
fuente
5
Este no se parece en nada al tipo de árbol que sugirió en su pregunta. Creo que Praveen Kumar debería recibir su respuesta
Blowsie
2
Estaba buscando un árbol como el primero, vi esta respuesta y decidí usar esto en su lugar. ¡Es curioso cómo la inspiración puede cambiar una solución!
Eric
2
@Blowsie: He tomado en consideración tu sugerencia y se ha hecho justicia, lol. Es bueno ver la evolución de un proyecto independiente debido a una solicitud aleatoria de un tipo cualquiera.
Kumarharsh
Demostración rápida: jsfiddle.net/pdcmoreira/6Lghm43a
Pedro Moreira
36

Si alguien quiere una versión expandible / plegable de la vista de árbol de la respuesta de Vitaliy Bychik, puede ahorrar algo de tiempo :)

http://jsfiddle.net/mehmetatas/fXzHS/2/

$(function () {
    $('.tree li').hide();
    $('.tree li:first').show();
    $('.tree li').on('click', function (e) {
        var children = $(this).find('> ul > li');
        if (children.is(":visible")) children.hide('fast');
        else children.show('fast');
        e.stopPropagation();
    });
});
Mehmet Ataş
fuente
:) ¡bonito! Buena idea +1.
Alex
1
Agregué $ ('. Tree> ul> li: first-child'). Show (); para admitir varios árboles en la página. Gracias
tribe84
8

Otro gran complemento jquery de Treeview es http://www.jstree.com/

Para obtener una vista avanzada, debe consultar jquery-treetable
http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/

Gal Margalit
fuente
Según el sitio, ya no se admite desde abril de 2010
levelnis
oh, es una pena que no sea compatible ... aunque se ve bien.
Kumarharsh
3
Hola, ambas bibliotecas están actualizadas y son compatibles
Gal Margalit
Son compatibles - ver github.com/ludo/jquery-treetable/releases
Bartek Jablonski