Albero costruito con Twitter Bootstrap e Backbone.js?

Question

Esiste un albero modulare semplice creato con Twitter Bootstrap e Backbone.js che fornisce funzionalità di controllo struttura comune?

Answer 1

Ecco un widget albero Bootstrap (da "Trees in Twitter Bootstrap"):

Sulla Vitaliy's CSS e Mehmet's jQuery, ho cambiato le a tag per span tag e integrato alcune Glyphicons e badging in my take on a Bootstrap tree widget.

Esempio:

Per il credito supplementare, ho creato un GitHub project to host the jQuery and LESS code that goes into adding this tree component di bootstrap. Si prega di consultare la documentazione del progetto allo http://jhfrench.github.io/bootstrap-tree/docs/example.html.

In alternativa, qui è la fonte MENO per generare che i CSS (il JS può essere ritirato dal 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; 
    } 
} 

Answer 2

Recentemente ho pubblicato il mio widget dell'albero backbone.js. Controllalo allo https://bitbucket.org/dnation/bbtree/ e verifica se soddisfa le tue esigenze.