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ı?Twitter Bootstrap ve Backbone.js ile oluşturulmuş ağaç?
cevap
İş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;
}
}
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.
- 1. Twitter bootstrap ile Browserify
- 2. Twitter ile Ember.js Bootstrap Modal
- 3. HTML5 Boilerplate ve Twitter Bootstrap
- 4. Twitter Bootstrap Popovers Dinamik Olarak Oluşturulmuş İçerik için çalışmıyor
- 5. Twitter-bootstrap "eki"
- 6. Twitter Bootstrap Popover, ajax aracılığıyla dinamik olarak oluşturulmuş içeriğe sahip
- 7. Backbone.js görünümünde bootstrap-modal kullanma
- 8. Twitter bootstrap: İki bootstrap-sass'a ve twitter-bootstrap-raylarına ihtiyacım var mı?
- 9. Büküm ile twitter bootstrap sass sürümünü yükleyin
- 10. Bootstrap twitter 3.0 ve knockoutjs doğrulaması
- 11. Twitter Bootstrap test ortamı
- 12. twitter bootstrap dinamik karusel
- 13. Twitter Bootstrap "kapsayıcı sıvı"
- 14. Hatalı seçenek: '; _;' Twitter Bootstrap
- 15. Twitter Bootstrap Containers
- 16. Twitter bootstrap ile çöken ızgaralar 3
- 17. knockoutjs + twitter bootstrap ile sekmeleri takip edin
- 18. Twitter Bootstrap ile tablolara stil uygulama
- 19. jquery ui'yi twitter-bootstrap ile kullanabilir miyiz?
- 20. Twitter Bootstrap ve daha az dosya
- 21. Twitter bootstrap typeahead delay
- 22. twitter bootstrap carousel kaybolur
- 23. Twitter bootstrap bölünmüş açılır
- 24. Raylar Varlık Pipeline ve Twitter Bootstrap Gem
- 25. Twitter Bootstrap Atlıkarınca - Dönme
- 26. Twitter bootstrap düğmesini gizle
- 27. Twitter Bootstrap çevrimiçi yükleyici?
- 28. Twitter için Önyükleme Bootstrap
- 29. Twitter Bootstrap with Spring MVC
- 30. Twitter IE7 için Bootstrap desteği
http://lostechies.com/derickbailey/2012/04/05/composite -views-tree-structures-tables-ve-more/ –
Sorunuzu çözebildik mi? –