JSTREE - Sélection de nœud basée sur l'URL de la navigation actuelle

Question

Aujourd'hui, j'utilise les cookies intégrés du JSTREE afin de préserver les navigations des utilisateurs dans l'arbre.

Sur le nœud, cliquez dans l'arborescence, l'utilisateur est redirigé vers la page correspondante de mon site et le nœud cliqué est sélectionné / mis en surbrillance grâce à l'intégration des cookies JSTREE.

Maintenant, je voudrais sélectionner / mettre en surbrillance les nœuds de l'arborescence également sur la base d'une navigation entre le site Web, c'est-à-dire qu'un lien sur le site pourrait également être un nœud dans l'arbre, par exemple, une grille de lignes qui apparaissent également dans l'arbre.

La question est de savoir comment puis-je faire cette sélection / mise en évidence de nœud «manuellement» et je pense également que je devrais savoir d'où l'utilisateur est arrivé sur la page, de l'arbre ou d'un autre lien du site.

Merci,

Answer 1

J'ai déjà construit une approche complète pour cela en utilisant JSTREE, un événement de hashchange et de véritables URL SEO-par SEO, donc cela s'intégrerait tout simplement dans votre idée et vous pourriez lancer vos cookies mais pas dans le mauvais sens. Cela fonctionne également avec le signet et l'arrivée d'une URL tel qu'il regarde à travers les nœuds puis correspond aux liens pour sélectionner le nœud. C'est le mieux avec Ajax comme il se doit le faire lorsque cela est possible.

Je commente cela pour vous pour que vous puissiez le comprendre. L'exemple de travail est ici www.kitgui.com/docs Cela montre tout le contenu.

$(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');
});

N'hésitez pas à me demander si vous avez plus de questions.