Tree built with Twitter Bootstrap and Backbone.js?

Question

Is there a simple modular tree built using Twitter Bootstrap and Backbone.js that provides general tree management features?

Answer 1

Here's the Bootstrap tree widget (from Trees to Twitter Bootstrap ):

Based on Vitaliy CSS and Mehmet jQuery , I changed the a tags to span tags and included some Glyphicons and an icon in my Bootstrap widget widget .

Example:

For extra credit, I created a GitHub project to host jQuery and LESS code that adds this tree component to Bootstrap. See the project documentation at http://jhfrench.imtqy.com/bootstrap-tree/docs/example.html .

Alternatively, here the LESS source generates this CSS (JS can be selected from 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

I recently posted my treebone.js widget. Check it out at https://bitbucket.org/dnation/bbtree/ and see if it fits your needs.