Les arbres de Twitter Bootstrap
J'ai essayé de travailler sur la création d'un arbre (comme une arborescence de répertoires) qui utilise autant CSS et JS que possible (seulement pour les états, etc), et je veux savoir si il y a quelques arbres existants plugins pour bootstrap ou jquery ui bootstrap.
De référence ou pour les gens confus au sujet de cette question, je suis à la recherche de quelque chose comme dynatree pour bootstrap.
Vous devez vous connecter pour publier un commentaire.
Bâtiment sur Vitaliy CSS et Mehmet du jQuery, j'ai changé le
a
balises pourspan
balises et intégré quelques Glyphicons et retrait des badges en de mon point de vue sur un Bootstrap arbre widget.Exemple:
Pour le crédit supplémentaire, j'ai créé un Projet GitHub pour héberger le jQuery et MOINS de code qui va dans l'ajout de ce composant de l'arbre de Bootstrap. Veuillez consulter la documentation du projet à http://jhfrench.github.io/bootstrap-tree/docs/example.html.
Sinon, ici, c'est le MOINS source pour générer du CSS (le JS peuvent être ramassés à partir de la jsFiddle):
.parent_li
qui perdent leur couleur d'arrière-plan et deviennent gris si leur parent est planait au-dessus (dans votre deuxième arbre).Vous pouvez obtenir plus d'infos à ce sujet ici http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/.
:)
Si quelqu'un veut version verticale de l'arborescence de Rudes réponse, vous pouvez gagner du temps:
http://jsfiddle.net/Fh47n/
Pour ceux qui sont encore à la recherche d'un arbre avec CSS3, c'est un fantastique morceau de code que j'ai trouvé sur le net:
http://thecodeplayer.com/walkthrough/css3-family-tree
HTML
CSS
PS: à part le code, j'aime aussi la façon dont le site montre en action... vraiment innovant.
Si quelqu'un veut extensible/pliable version de l'arborescence de Vitaliy Bychik réponse, vous pouvez gagner du temps 🙂
http://jsfiddle.net/mehmetatas/fXzHS/2/
Un autre grand Treeview plugin jquery est http://www.jstree.com/
Pour une avance d'un point de vue, vous devriez vérifier jquery-treetable
http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/