Alberi in Twitter Bootstrap [chiuso]


108

Ho provato a lavorare sulla creazione di un albero (come un albero di directory) che utilizza più CSS e meno JS possibile (solo per gli stati, ecc.) E voglio sapere se ci sono alcuni buoni plug-in per alberi esistenti per bootstrap o bootstrap jquery-ui .


Per riferimento o per le persone confuse su questa domanda, sto cercando qualcosa come dynatree per bootstrap.

Risposte:


181

Sulla base CSS di Vitaliy e jQuery di Mehmet , ho cambiato i atag a spantag e integrato alcune Glyphicons e badging nel mio introito su un widget di albero Bootstrap .

Esempio: la mia opinione su un widget albero Bootstrap

Per credito extra, ho creato un Icona di GitHubprogetto GitHub per ospitare il codice jQuery e LESS che va ad aggiungere questo componente ad albero a Bootstrap. Si prega di consultare la documentazione del progetto su http://jhfrench.github.io/bootstrap-tree/docs/example.html .

In alternativa, ecco la sorgente MENO per generare quel CSS (il JS può essere prelevato da 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;
    }
}

molto bene. Tranne, ovviamente, lo strano comportamento dei figli di li .parent_liche perdono il loro colore di sfondo e diventano grigi quando il loro genitore passa sopra (nel tuo secondo albero).
kumarharsh

Grazie @Harsh. Il comportamento al passaggio del mouse che ritieni strano segue la programmazione di Vitaliy per fornire all'utente un indicatore visivo di quali nodi verranno compressi.
Jeromy French

1
@JeromyFrench Questo albero ha un'esperienza molto piacevole e fluida. Esattamente quello che stavo cercando quando ho cercato. Buon lavoro.
Nathan Moos

5
grazie per il codice. come si comprime predefinito? quando visiti la pagina voglio che sia compressa? potresti aiutarmi? Grazie.
Erdem Ece

5
jsfiddle.net/jayhilwig/hv8vU :: Ho aggiornato il codice e ho biforcato un nuovo violino qui per bootstrap 3.0:
jayseattle

79

Riesci a credere che la visualizzazione ad albero nell'immagine qui sotto non utilizzi JavaScript, ma si basa solo su CSS3? Dai un'occhiata a questo CSS3 TreeView , che è buono con Twitter BootStrap:

Visualizzazione ad albero

Puoi ottenere maggiori informazioni su questo qui http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ .


wow ... questo è buono ... dovrò esaminare questo ... grazie ...
kumarharsh

1
@Harsh Certo, è pronto per il bootstrap e per favore accetta la mia risposta se è utile. :) PS: lo stiamo usando. :)
Praveen Kumar Purushothaman

La soluzione sembra buona, ma ci sono alcune funzionalità, che volevamo e non sono fornite in questa versione, come l'evidenziazione dei rami, ecc. Tuttavia, è un ottimo esempio di come eseguire lo styling dell'albero
kumarharsh

1
trovato un bell'esempio thecssninja.com/demo/css_tree
surya

1
Vale la pena notare che il post del blog a cui si fa riferimento nella risposta contiene alcuni semplici CSS, che per me non funzionano, ma la demo effettiva contiene alcuni CSS più complicati (e non spiegati).
Robin Green

53

Se qualcuno vuole la versione verticale della vista ad albero dalla risposta di Harsh, puoi risparmiare un po 'di tempo:

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;
}

1
Semplice ed elegante. Upvoted :)
thefourtheye

1
Soluzione perfetta!
CORSAIR

Wow, ottima soluzione e facilmente estensibile!
rkallensee

Dov'è la funzionalità di espansione della compressione?
Syed Aqeel Ashiq

41

Per coloro che stanno ancora cercando un albero con CSS3, questo è un fantastico pezzo di codice che ho trovato in rete:

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;
}

PS: a parte il codice, mi piace anche il modo in cui il sito lo mostra in azione ... davvero innovativo.


5
Questo non è proprio niente come il tipo di albero che hai suggerito nella tua domanda. Credo che Praveen Kumar dovrebbe essere premiato con la sua risposta
Blowsie

2
Stavo cercando un albero come il primo, ho visto questa risposta e ho deciso di usarla invece. Buffo come l'ispirazione possa cambiare una soluzione!
Eric

2
@Blowsie: ho preso in considerazione il tuo suggerimento e la giustizia è stata servita, lol. È bello vedere un progetto autonomo evolversi a causa di una richiesta casuale da parte di un ragazzo casuale.
kumarharsh


36

Se qualcuno vuole una versione espandibile / comprimibile della vista ad albero dalla risposta di Vitaliy Bychik, puoi risparmiare un po 'di tempo :)

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();
    });
});

:) simpatico! Buona idea +1.
Alex

1
Ho aggiunto $ ('. Tree> ul> li: first-child'). Show (); per supportare più alberi nella pagina. Grazie
tribe84

8

Un altro ottimo plugin jquery di Treeview è http://www.jstree.com/

Per una visualizzazione anticipata dovresti controllare jquery-treetable
http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/


Secondo il sito, non è più supportato da aprile 2010
levelnis

oh è un peccato che non sia supportato ... sembra buono però.
kumarharsh

3
Salve, entrambe le librerie sono aggiornate e supportate
Gal Margalit

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.