是否有一個使用Twitter Bootstrap和Backbone.js構建的簡單模塊化樹,可以提供常用樹控制功能?用Twitter Bootstrap和Backbone.js構建的樹?
6
A
回答
3
這裏有一個引導樹部件(由「Trees in Twitter Bootstrap」):
大廈Vitaliy's CSS和Mehmet's jQuery,我改變了a
標籤span
標籤和納入一些Glyphicons和badging爲my take on a Bootstrap tree widget。
例子:
對於額外的信用,我創建了一個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的項目文檔。
可替換地,這裏是LESS源以產生CSS(JS的可以從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;
}
}
1
我最近發佈了我的backbone.js樹小部件。請查看https://bitbucket.org/dnation/bbtree/,看看它是否符合您的需求。
相關問題
- 1. 使用Twitter Bootstrap和Backbone.js構建的網格
- 2. Backbone.js和層次結構/樹
- 3. Twitter Bootstrap + Backbone.js +什麼UI庫?
- 4. 使用Twitter Bootstrap構建ScreenShot Gallery
- 5. Twitter Bootstrap和Bootstrap-Xtra
- 6. Twitter Bootstrap和RoR
- 7. Require.js和twitter-bootstrap
- 8. Python和Twitter Bootstrap
- 9. twitter-bootstrap和html
- 10. AngularJS和Twitter Bootstrap
- 11. Plone和Twitter Bootstrap
- 12. Twitter Bootstrap和ReCaptcha
- 13. Nivoslider和Twitter Bootstrap
- 14. Twitter Bootstrap和gmaps4rails
- 15. Symfony2和Twitter Bootstrap
- 16. 使用twitter bootstrap構建的網站的合適許可
- 17. 如何使Twitter上的樹像Twitter上的Bootstrap背景?
- 18. Ember.js和Twitter Bootstrap Popover
- 19. Twitter Bootstrap和Spring MVC
- 20. Symfony2和Twitter Bootstrap glyphicons
- 21. backbone和twitter-bootstrap popover
- 22. HTML5 Boilerplate和Twitter Bootstrap
- 23. Twitter Bootstrap和圖像
- 24. 如何獲取Twitter Bootstrap Twipsy與Backbone.js一起使用
- 25. 使用twitter-bootstrap-rails gem升級twitter bootstrap
- 26. twitter-bootstrap中的bootstrap
- 27. 使用div溢出構建長表。 (twitter-bootstrap)
- 28. 如何使用Twitter Bootstrap v3.0構建雙列流體佈局
- 29. Twitter Bootstrap VS Bootstrap
- 30. Backbone.js with Twitter Bootstrap Tabs - 刪除鏈接中的#
http://lostechies.com/derickbailey/2012/04/05/composite -views-tree-structures-tables-and-more/ –
我們能解決你的問題嗎? –