[ HTML5 - JSTREE ] grafica dell'albero

[evil_stefano]

Ciao,

cosa bisogna fare per avere un albero come quello della demo? intendo la grafica dei bottoni (crea -cancella) e delle singole voci dell'albero (non mi interessano le icone ma il fatto che ogni riga sia di colore alternato e che faccia l'effetto mouse hover.
http://www.jstree.com/demo/

i dati li ho in un elenco normale, ho importato:
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<script src="dist/jstree.min.js"></script>
JQUERY

ho fatto lo script per l'albero:
$(function () { $('#jstree_demo_div').jstree(); });

"core" : {
"animation" : 0,
"check_callback" : true,
"themes" : { "stripes" : true }
},
"types" : {
"#" : {
"max_children" : 1,
"max_depth" : 4,
"valid_children" : ["root"]
},
"root" : {
"valid_children" : ["default"]
},
"default" : {
"valid_children" : ["default","file"]
},
"file" : {
"valid_children" : []
}
},
"plugins" : [
"contextmenu", "dnd", "search","state", "types", "wholerow"
]
});


sull'elmento DIV jstree_demo_div che contiene l'elenco.

ma alla fine non ho la grafica che vedo nella demo, non ho proprio grafica, solo l'elenco.

non capisco quali siano i temi di base (graficamente parlando), e come dovrebbero risultare.

analizzando la pagina della demo vedo che ad ogni elemento della lista associa uno stile, che si riferisce al css Bootstrap.
Ma i temi non sono inclusi già nel pacchetto jstree?


insomma.. non ho proprio capito come fare la grafica (o il css) di questo jstree.. :muro:


Grazie

[Daniels118]

Guarda l'esempio:
qui puoi vedere quali sono i dati che hanno generato l'albero: http://www.jstree.com/static/3.0.0-beta8/assets/ajax_demo_roots.json?id=%23
l'attributo
"type" : "root"
dice che quel nodo è di tipo root; nel codice di inizializzazione dell'albero al tipo di nodo root viene associata un'icona:
"root" : {
"icon" : "/static/3.0.0-beta8/assets/images/tree_icon.png",
ovviamente quello è un path relativo al dominio www.jstree.com, per sicurezza è meglio scaricare le icone in una cartella del tuo sito ed eventualmente riscrivere i path.

[evil_stefano]

si, avevo tolto apposta il riferimento all'icona.
il problema non è l'icona ad albero, ma il fatto che non ottengo gli effetti visivi sulle singole voci dell'albero come nella demo. (il mouse hover, il select...)
Non capisco se questi effetti sono automaticamente associati agli elementi del jstree tramite il theme, o se vanno messi a mano su ogni oggetto del jstree.


<div id="jstree_demo" class="demo jstree jstree-1 jstree-default jstree-default-responsive" style="margin-top:1em; min-height:400px;" role="tree" aria-activedescendant="demo_root_2">

<ul class="jstree-container-ul jstree-striped jstree-no-dots jstree-wholerow-ul">
<li id="demo_root_1" class="jstree-node jstree-open" role="treeitem" aria-expanded="true" aria-selected="false">
<div class="jstree-wholerow" unselectable="on"></div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#"></a>
<ul class="jstree-children" role="group"></ul>
</li>
<li id="demo_root_2" class="jstree-node jstree-leaf jstree-last" role="treeitem" aria-selected="false"></li>
</ul>

</div>

[Daniels118]

Perfetto, avevo capito il contrario di quello che avevi scritto :muro:
Scusa se ti faccio una domanda scontata, ma il file "dist/themes/default/style.min.css" si trova sul tuo sito in quel path?

[evil_stefano]

Perfetto, avevo capito il contrario di quello che avevi scritto :muro:
Scusa se ti faccio una domanda scontata, ma il file "dist/themes/default/style.min.css" si trova sul tuo sito in quel path?

yes.
lo apro tranquillamente.

A volte ho il problema che ciò che si visualizza bene su eclipse (uso eclipse per scrivere il codice) poi su firefox non va..

ma in questo caso in entrambi i browser (eclipse e FF) vedo gli altri stili, ma l'albero in entrambi i browser gli alberi sono senza grafica.