Twitter Bootstrap ve Backbone.js ile oluşturulmuş ağaç?

Question

Ortak ağaç denetimi işlevselliği sağlayan Twitter Bootstrap ve Backbone.js ile oluşturulmuş basit bir modüler ağaç var mı?

Answer 1

İşte ("Trees in Twitter Bootstrap" dan) bir Bootstrap ağaç Widget var: Vitaliy's CSS ve Mehmet's jQuery üzerinde

Bina, ben span etiketlere a etiketlerini değiştirdi ve my take on a Bootstrap tree widget içine biraz Glyphicons ve badging dahil etti.

Örnek: İlave kredi için

, ben Bootstrap için GitHub project to host the jQuery and LESS code that goes into adding this tree component oluşturduk. Lütfen http://jhfrench.github.io/bootstrap-tree/docs/example.html adresindeki proje belgelerine bakın.

Alternatif olarak, burada (JS jsFiddle dan alınabilir) o CSS oluşturmak için AZ kaynağıdır:

@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

Kısa bir süre önce backbone.js ağaç widget'ımı yayınladım. https://bitbucket.org/dnation/bbtree/ numaralı telefonu inceleyin ve ihtiyaçlarınızı karşılayıp karşılamadığını öğrenin.