TwitterはBootstrapとBackbone.jsで構築されたツリーですか？

Question

一般的なツリーコントロール機能を提供するTwitter BootstrapとBackbone.jsで構築された単純なモジュラツリーはありますか？

Answer 1

はここ（「Trees in Twitter Bootstrap」から）ブートストラップツリーウィジェットです：Vitaliy's CSSとMehmet's jQuery上

ビル、私はspanタグにaタグを変更し、my take on a Bootstrap tree widgetにいくつかのGlyphiconsとbadgingを組み込みます。

例：余分な信用のため

、私は、ブートストラップするGitHub project to host the jQuery and LESS code that goes into adding this tree componentを作成しました。プロジェクトのドキュメントhttp://jhfrench.github.io/bootstrap-tree/docs/example.htmlを参照してください。

代わりに、ここでは（JSがjsFiddleからピックアップすることができます）そのCSSを生成するためのLESSソースです：

@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

私は最近backbone.jsツリーウィジェットを公開しました。https://bitbucket.org/dnation/bbtree/にチェックして、あなたのニーズを満たしているかどうかを確認してください。