一般的なツリーコントロール機能を提供するTwitter BootstrapとBackbone.jsで構築された単純なモジュラツリーはありますか?TwitterはBootstrapとBackbone.jsで構築されたツリーですか?
6
A
答えて
3
はここ(「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;
}
}
1
私は最近backbone.jsツリーウィジェットを公開しました。https://bitbucket.org/dnation/bbtree/にチェックして、あなたのニーズを満たしているかどうかを確認してください。
関連する問題
- 1. TwitterのブートストラップとBackbone.jsで構築されたグリッド
- 2. Twitter Bootstrapでコミュニティーフォーラムを構築する
- 3. Twitter Bootstrap + Backbone.js +どのUIライブラリですか?
- 4. Twitter Bootstrapのキャレットはどのように構築されていますか?
- 5. Twitter Bootstrap:ネストされた行?
- 6. Twitter Bootstrap TwipsyをBackbone.jsと連携させる方法
- 7. gem bootstrap-sassとgem twitter-bootstrap-railsの違いは何ですか
- 8. Backbone.jsで深くネストされたモデルを構築する方法v0.5
- 9. Bootstrap、Twitter Bootstrap、Bootstrap 3の違いは何ですか?
- 10. Twitter Bootstrapと「モバイルファースト」
- 11. Prolog:完全にバランスのとれたツリーの構築
- 12. カテゴリとサブカテゴリとそのサブカテゴリからのツリー構造の構築
- 13. Backbone.jsプロジェクトを構築するにはどうすればよいですか?
- 14. Backbone.jsと階層/ツリー
- 15. マテリアライズドパスからツリーを構築する
- 16. マテリアライズドパスからJSONツリーを構築する
- 17. Oracleテーブルからツリーを構築する
- 18. infopathから構築されたシェイプフォームは安全ですか?
- 19. Twitter BootStrapトップバーとドロップダウンメニュー
- 20. データベースMagentoグリッドで構築された
- 21. ファイルからツリーを再構築
- 22. Twitter Bootstrap Typeaheadのデータソースの構文
- 23. Twitterのブートストラップを構築するには
- 24. BootstrapテーマとTwitter-Bootstrap-Rails Gemの統合
- 25. EXTJSで下のツリーを構築するには?
- 26. ツリーのノードで等価クラスを構築するための良いデータ構造は何ですか?
- 27. Linq投稿のツリーを構築する
- 28. 平衡ツリーを構築する
- 29. Twitter Bootstrapでスタイルシートをリセット
- 30. ネストされた順不同リストを使用してツリーを構築
http://lostechies.com/derickbailey/2012/04/05/composite -views-tree-structures-tables-more- –
あなたの質問を解決できましたか? –