jstree - knooppuntselectie op basis van de huidige genavigeerde URL

Vandaag gebruik ik de ingebouwde cookies van de jsTree om gebruikersnavigaties in de boom te behouden.

op knooppunt klik in de boom de gebruiker wordt doorgestuurd naar de overeenkomstige pagina in mijn site en de aangeklikte node wordt geselecteerd/gemarkeerd dankzij de integratie van jsTree cookies.

Nu zou ik knooppunten in de boom ook willen selecteren/markeren op basis van een navigatie op de website, dat wil zeggen dat een link op de site ook een knooppunt in de structuur kan zijn, bijvoorbeeld een raster met rijen dat ook verschijnt in de boom.

De vraag is hoe ik dit 'handmatig' knopen selecteren/markeren kan doen en ik denk ook dat ik moet weten van waar de gebruiker is aangekomen op de pagina, van de boom of van een andere link op de site.

Bedankt,

1
het gaat niet alleen om css-stijl, maar ook om DOM-manipulatie zoals open/dicht-knooppunten enz.
toegevoegd de auteur Yair Nevet, de bron
@Yair, heb ik je vraag beantwoord?
toegevoegd de auteur Jason Sebring, de bron
Kunt u de vraag überhaupt verduidelijken? Het is vrij eenvoudig om jsTree-knooppunten tijdens het vliegen of bij het laden te openen, te sluiten en te restylen. Ik geef graag een gedetailleerd voorbeeld, maar ik weet niet precies waar je naar op zoek bent - een manier om de status van jsTree-knooppunten te beheersen via links buiten de boom? Wanneer op een koppeling wordt geklikt, navigeert de browser naar een nieuwe pagina of wordt asynchrone inhoud geladen? Misschien kun je wat code geven om naar te kijken?
toegevoegd de auteur Daniel Mendel, de bron
Wordt de functionaliteit waarnaar u op zoek bent niet geleverd door de plug-in jsTree UI? Zo niet, dan geloof ik dat jsTree eenvoudigweg css-stijlen toevoegt/verwijdert om de visuele effecten te krijgen. Je zou gewoon in staat moeten zijn om te achterhalen wat de klassennamen zijn en ze handmatig naar wens toe te passen.
toegevoegd de auteur Paula Bean, de bron
Het is een tijdje geleden dat ik met jsTree heb gewerkt, maar ik denk dat zelfs open/sluitingsknooppunten worden behandeld door CSS-klassen. Het is gewoon een kwestie van het selecteren van degene die je wilt en het toepassen van de juiste klasse.
toegevoegd de auteur Paula Bean, de bron

1 antwoord

Ik heb hiervoor al een volledige aanpak ontwikkeld met behulp van jsTree, hashchange-evenement en echte echte SEO-compatibele URL's, zodat dit eenvoudig in je idee zou passen en je je cookies zou kunnen weggooien, maar niet op een slechte manier. Dit werkt ook met bladwijzers en komt van een URL als deze door de knooppunten kijkt en overeenkomt met de koppelingen om het knooppunt te selecteren . Dit is echter het beste met AJAX zoals het zou moeten zijn wanneer dit mogelijk is.

Ik becommentarieer dit voor jou zodat je het kunt begrijpen. Het werkende voorbeeld is hier www.kitgui.com/docs dat alle inhoud laat zien.

$(function() {
       //used to remove double reload since hash and click are intertwined
    var cancelHashChange = false,
       //method sets the selector based off of URL input
    setSelector = function (path) {
        var startIndex = path.indexOf('/docs');
        if (startIndex > -1) {
            path = path.substr(startIndex);
        }
        path = path.replace('/docs', '').replace('/', '');
        if ($.trim(path) === '') { path = 'overview'; }
        return '.' + path;
    };
       //sets theme without the folders, plain jane
    $('.doc-nav').jstree({
        "themes": {
            "theme": "classic",
            "dots": true,
            "icons": false
        }
    }).bind("loaded.jstree", function (event, data) {
       //when loaded sets initial state based off of priority hash first OR url
        if (window.location.hash) {//if hash defined then set tree state
            $.jstree._focused().select_node(selector);
            $(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click');
        } else {//otherwise base state off of URL
            $.jstree._focused().select_node(setSelector(window.location.pathname));
        }
    });
       //all links within the content area if referring to tree will affect tree
       //and jump to content instead of refreshing page
    $('.doc-nav a').live('click', function (ev) {
        var $ph = $('<div />'), href = $(this).attr('href');
        ev.preventDefault();
        cancelHashChange = true;
           //sets state of hash
        window.location = '#' + $(this).attr('href');
        $('.doc-content').fadeOut('fast');
           //jQuery magic load method gets remote content (John Resig is the man!!!)
        $ph.load($(this).attr('href') + ' .doc-content', function() {
            cancelHashChange = false;
            $('.doc-content').fadeOut('fast', function() {
                $('.doc-content').html($ph.find('.doc-content').html()).fadeIn('fast');
            });
        });
    });
       //if doc content is clicked and has referring tree content, 
       //affect state of tree and change tree content instead of doing link
    $('.doc-content a').live('click', function (ev) {
        ev.preventDefault();
        if ($(this).attr('href').indexOf('docs/') > -1) {
            $.jstree._focused().select_node(setSelector($(this).attr('href')));
            $(setSelector($(this).attr('href')) + ' a:first').trigger('click', false);
        }
    });
       //if back/forward are used, maintain state of tree as if it was being clicked
       //refers to previously defined click event to avoid double-duty
       //but requires ensuring no double loading
    window.onhashchange = function() {
        if (cancelHashChange) { cancelHashChange = false; return; }
        $.jstree._focused().select_node(setSelector(window.location.hash.substr(1)));
        $(setSelector(window.location.hash.substr(1)) + ' a:first').trigger('click', false);
    };
    $('#top-doc-link').closest('li').addClass('active');
});

Aarzel niet om mij te vragen of je nog meer vragen hebt.

3
toegevoegd