JQuery JSTree - aggiungi una descrizione comando

C'è un modo per aggiungere un Tooltip a un nodo JSTree? Vorrei visualizzare informazioni aggiuntive quando l'utente si posiziona su un elemento.JQuery JSTree - aggiungi una descrizione comando

Sono piuttosto dense quando si tratta di JQuery, quindi potrebbe esserci una risposta ovvia a questo.

Modifica: Grazie a zzzz di seguito, sono in grado di visualizzare una semplice casella di passaggio del mouse. Non riesco ancora ad applicare una fantasiosa descrizione di JQuery nonostante inserisca l'albero div all'interno di un fieldset come suggeriscono le istruzioni all'interno della pagina Suggerimento.

fonte

2011-08-17 Haphazard

non si tratta solo di aggiungere un attributo titolo al proprio nodo nell'albero su cui è posizionato il puntatore del mouse ?? niente di speciale ..

fonte

2011-08-17 17:21:06 Baz1nga

Grazie per il suggerimento. Con questo, sono stato in grado di ottenere un semplice tooltip in html. Anche se questo può essere abbastanza buono, mi piacerebbe ancora sapere come attivare un fantasioso suggerimento JQuery su hover di un nodo. – Haphazard

I tooltip standard possono essere ottenuti impostando 'node [a_attr] [titolo]' nei dati JSON. – cweiske

$("#my_tree).bind("hover_node.jstree", function (e, data) 
{ 
    alert(data.rslt.obj.attr("id")); 
})

fonte

2011-09-08 19:32:36

Per catturare il mouse che lascia il nodo, cercare l'evento 'dehover_node.jstree'. Lasciando questo qui come riferimento. – arvidkahl

cosa fa esattamente 'data.rslt.obj.attr (" id ")' Voglio dire che cosa sono i dati, rslt, obj qui? –

Creo il mio jstree in modo dinamico utilizzando la funzione create_node:

$("#my_tree").jstree("create_node", 
    "my_node", 
    "inside", 
    { "attr": { "id": "my_node" }, 
    "data": { "attr": { "class": "show_tooltip", 
         "title": "my tooltip text" }, 
       "title": "my node text" } });

E poi io definisco la classe .show_tooltip come tooltip: $(".show_tooltip").tooltip();

fonte

2011-11-17 12:35:56 Greg

Aggiunta di un suggerimento per jstree è molto semplice Prima di scrivere i passaggi lasciatemi spiegare cosa farò

Prerequisiti: dovresti usare la libreria jquery e altre dipendenze. Quindi, nella tua testa tag che dovrebbe essere simile a questo

<head> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
<script> 
$(function() { 
$(document).tooltip(); 
}); 
</script> 
<style> 
label { 
display: inline-block; 
width: 5em; 
} 
</style> 
</head>

Il codice qui sopra ottenere la libreria jQuery e CSS necessario. Inoltre creerà lo stile richiesto per la punta dello strumento

Quindi ora per i passaggi da prendere sul Jstree. notare che la scrittura iam questa risposta per l'ultimo verison di jstree 3.0.2

Avremo bisogno di prendere il 'hover_node.jstree'

.on('hover_node.jstree',function(e,data){ 
$("#"+data.node.id).prop('title', "add your custom title here"); 
})

Questo è tutto quello che hai da fare e il jquery avrà cura del resto per mostrare il tooltip

La logica che sta dietro questo è che jquery controlla automaticamente se c'è un attributo tittle associato a qualsiasi nodo (es. elemento) e quindi visualizza il suggerimento se c'è un titolo associato. Quindi tutto ciò che stiamo facendo è semplicemente aggiungere il titolo al nodo in modo dinamico. Questo ti dà la flessibilità di aggiungere suggerimenti personalizzati su ciascun nodo in base ai dati per ogni nodo o puoi anche hardcode se è fisso.

Per ulteriori personalizzazione e lo styling è possibile fare riferimento Jquery Tooltip

fonte

2014-08-26 08:08:21 Chetan

Grazie per la tua brillante risposta. Mi hai salvato la vita in una certa misura. Sto cercando di capire come ottenere per mostrare un'immagine per un suggerimento, e la mia testa sta per venire fuori per questo. –

nella proprietà title del nodo, prova a utilizzare il tag img con l'src dell'immagine e controlla se funziona. – Chetan

Ciao @ Chetan, l'ho provato ma tutto ciò che ho potuto fare è stato visualizzare per me html come suggerimento. Sto ancora cercando di risolvere un problema! –

Utilizzare la "a_attr" o "li_attr" per aggiungere un titolo, a seconda di quale elemento si desidera che il titolo di essere in, come documentato qui: https://www.jstree.com/docs/json/

Se si utilizza la funzione "create_node", quindi fare in questo modo:

$("#my_tree").jstree("create_node", 
    "my_node", 
    "inside", { 
     "attr": { 
      "id": "my_node" 
     }, 
     "li_attr": { //or a_attr if you prefer 
      "title": "my tooltip text", 
      "class": "show_tooltip" 
     }, 
     "text": "my node text" 
    });

è possibile che questo mostrerà un tooltip nel browser. Se si desidera utilizzare un suggerimento personalizzato (ad esempio Bootstrap), è sufficiente chiamare $ (". Show_tooltip").tooltip();

fonte

2017-12-06 14:32:04 Andrew

JQuery JSTree - aggiungi una descrizione comando

risposta

Problemi correlati