dynatree - Come scorrere verso il nodo attivo?

Question

Ho dinatree con altezza fissa e barra di scorrimento verticale.

node.activate(); seleziona il nodo che sto cercando, ma non sposta la barra di scorrimento verticale, quindi devo scorrere manualmente per vedere il nodo attivo.

Come lo si scorre programmaticamente?

---

Grazie a Mar10, ho risolto questo problema:

var activeLi = node.li; 
$('#tree').animate({ 
    scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop() 
}, 'slow'); 

Answer 1

Dynatree non ha una funzionalità incorporata scrollTo. Ma dovresti essere in grado di utilizzare uno dei metodi e plugin esistenti, una volta che hai l'elemento DOM che vuoi rendere visibile.

Nel tuo caso, hai già sembrano avere un oggetto node, in modo da poter ottenere il tag associato alla <li> e <span> utilizzando node.li o node.span.

In generale è possibile ottenere il nodo attivo in qualsiasi momento chiamando

var node = $("#tree").dynatree("getActiveNode"); 
// or 
var node = $("#tree").dynatree("getTree").getActiveNode(); 

quindi ottenere l'elemento DOM associato:

var activeLI = node && node.li; 

o gestire l'evento di attivazione:

onActivate: function(node) { 
    var activeLI = node.li; 
    ... 
} 

Una volta ottenuto l'elemento, utilizzare un metodo standard:

Scroll to a div using jquery, jQuery scroll to element, How to scroll to an element in jQuery?, ...

Modifica 2014-05 Partendo Fancytree 2.0 autoscroll è stato aggiunto come opzione standard.

Answer 2

Ho avuto un problema simile e non sono riuscito a far funzionare scrollTop come indicato nell'esempio sopra. Ho riparato cambiando il selettore da '#tree' a '.dynatree-container':

 
$('.dynatree-container').animate({ // animate the scrolling to the node 
    scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop() 
}, 'slow'); 

Questo dovrebbe farti andare e salvare un paio di ore di frustrataion (:

Tra l'altro, ho sto usando la versione 1.22 di dynatree e jquery 1.8.3 e jquery ui 1.9.2

Answer 3

C'è un problema quando si usa $ ('. dynatree-container') quando si ha più di un albero nella pagina, poiché questo prova a selezionare ogni albero con questa classe. Ho molti alberi quindi devo selezionare l'albero con un particolare id ... ma trovo, come la persona precedente, che provavo a selezionare l'albero con il suo id (e g '#tree') non funziona. Quindi, cosa succederà ..? fare qualcosa come = $ ("# prevPageTree"). dynatree ("getTree"). Offset non funziona ...

Pochi minuti dopo: ok, capito come fare questo. Spelunking nel debugger di Chrome mostra che la classe .dynatree-container è in realtà collegata all'elemento ul> < inserito da dynatree sotto l'elemento #tree utilizzato per inizializzare l'istanza di dynatree.Quindi è necessario fare qualcosa di simile

$("#tree ul").animate({ // animate the scrolling to the node 
    scrollTop: $(activeLi).offset().top - $('#tree ul').offset().top + $('#tree ul').scrollTop() 
}, 'slow'); 

E se, come me, non si vuole che per scorrere il nodo fino alla parte superiore della finestra, quindi

scrollTop: $(activeLi).offset().top - $('#prevPageTree ul').offset().top + $('#prevPageTree ul').scrollTop() - 150 

sarà bene mettere la vostra nodo 150 pixel in basso