jstree - выбор узла на основе текущей навигационной ссылки - PullRequest
Новая
       24

jstree - выбор узла на основе текущей навигационной ссылки

1 голос
/ 06 декабря 2011

Сегодня я использую встроенные куки-файлы jsTree, чтобы сохранить навигацию пользователей в дереве.

при щелчке узла в дереве пользователь перенаправляется на соответствующую страницу моего сайта, и выбранный узел выбирается / выделяется благодаря интеграции файлов cookie jsTree.

Теперь я хотел бы выбрать / выделить узлы в дереве также на основе навигации по веб-сайту, т.е. ссылка на сайте также может быть узлом в дереве, например, сеткой строк это также появляется в дереве.

Вопрос в том, как я могу сделать это «ручное» выделение / выделение узла, и я также думаю, что должен знать, откуда пользователь зашел на страницу, из дерева или по какой-то другой ссылке на сайте.

Спасибо,

1 Ответ

3 голосов
/ 17 декабря 2011

Я уже разработал полный подход для этого, используя jsTree, событие hashchange и реальные реальные URL-адреса, способные оптимизировать SEO, так что это вполне вписалось бы в вашу идею, и вы могли бы бросить свои куки, но не плохим способом. Это также работает с закладками и поступлением с URL, когда он просматривает узлы, а затем сопоставляет ссылки, чтобы выбрать узел . Это лучше всего с AJAX, хотя, как и должно быть, когда это возможно.

Я комментирую это для вас, чтобы вы могли понять это. Рабочий пример здесь www.kitgui.com / docs , который показывает весь контент. 

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

Не стесняйтесь спрашивать меня, если у вас есть еще вопросы.

...