Drzewo zbudowane przy użyciu Twitter Bootstrap i Backbone.js?

Question

Czy istnieje proste modułowe drzewo zbudowane za pomocą Twitter Bootstrap i Backbone.js, które zapewnia wspólną funkcję kontroli drzewa?

Answer 1

Oto widget drzewo Bootstrap (od "Trees in Twitter Bootstrap"):

Opierając się na Vitaliy's CSS i Mehmet's jQuery, zmieniłem a tagów span tagów i włączone jakieś Glyphicons i badging do my take on a Bootstrap tree widget.

Przykład:

Dla dodatkowego kredytu, Utworzyłem GitHub project to host the jQuery and LESS code that goes into adding this tree component do startowej. Zobacz dokumentację projektu pod numerem http://jhfrench.github.io/bootstrap-tree/docs/example.html.

Alternatywnie, jest tu mniej źródło do wygenerowania CSS (JS można odebrać z 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

Niedawno opublikowałem mój widget drzewa szkieletu.js. Sprawdź go pod numerem https://bitbucket.org/dnation/bbtree/ i sprawdź, czy spełnia on Twoje wymagania.