jstree - 基于当前导航URL的节点选择 [英] jstree - node selection based on current navigated url
问题描述
今天我使用jsTree的内置cookie来保存树中的用户导航。
在节点上点击用户所在的树重定向到我的网站中的相应页面，并通过jsTree cookie集成选择/突出显示点击的节点。
现在，我想选择/突出显示节点树也基于网站之间的导航，即，网站中的链接也可以是树中的节点，例如也出现在树中的行的网格。
问题是如何做这个手动节点选择/突出显示，我也认为我应该知道用户从哪里到达页面，从树或从站点的其他链接。
感谢，
这使用jsTree，hashchange事件和实际的真正的SEO能够URL，这将适合你的想法很简单，你可以折腾你的cookies，但不是一个坏的方式。 这也适用于书签和从网址到达，因为它通过节点查找，然后匹配链接以选择节点。这是最好的AJAX虽然，因为它应该是可能的时候。
我为你评论这个，所以你可以理解它。工作示例在这里 www.kitgui.com/docs 显示所有内容。
$（function（）{
//用于删除双重重载，因为散列和点击互相交织
var cancelHashChange = false，
//方法根据URL输入设置选择器
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;
};
//设置主题没有文件夹，纯jane
$（'。doc-nav'）。jstree（{
themes：{
theme classic，
dots：true，
icons：false
}
}
//加载时设置初始状态基于优先级哈希优先或url
if（window.location.hash）{//如果哈希定义然后设置树状态
$ .jstree._focused （）.select_node（selector）;
$（setSelector（window.location.hash.substr（1））+'a：first'）。trigger（'click'）;
} else {//否则基本状态偏离URL
$ .jstree._focused（）。select_node（setSelector（window.location.pathname））;
}
}）;
//内容区域中的所有链接（如果引用树）将影响树
//并跳转到内容而不是刷新页面
$（'。doc-nav a'）。live 'click'，function（ev）{
var $ ph = $（'< div />'），href = $（this）.attr（'href'）;
ev.preventDefault （）;
cancelHashChange = true;
//设置散列的状态
window.location ='＃'+ $（this）.attr（'href'）;
$ （'.doc-content'）。fadeOut（'fast'）;
// jQuery魔法加载方法获取远程内容（John Resig是男人!!!）
$ ph.load this）.attr（'href'）+'.doc-content'，function（）{
cancelHashChange = false;
$（'。doc-content'）。fadeOut （）{
$（'。doc-content'）。html（$ ph.find（'。doc-content'）。html（））。fadeIn（'fast'）;
} ;
}）;
}）;
//如果doc内容被点击并具有引用树的内容，
//影响树的状态和改变树的内容，而不是链接
$（'。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）;
}
}）;
//如果使用back / forward，保持树的状态，就好像它被点击
//指的是以前定义的点击事件，以避免双重的
//但要求确保没有double loading
window.onhashchange = function（）{
if（cancelHashChange）{cancelHashChange = false;返回; }
$ .jstree._focused（）。select_node（setSelector（window.location.hash.substr（1）））;
$（setSelector（window.location.hash.substr（1））+'a：first'）。trigger（'click'，false）;
};
$（'＃top-doc-link'）。nearest（'li'）。addClass（'active'）;
}）;如果您有其他问题，请随时与我们联系。
Today I'm using the built-in cookies of the jsTree in order to preserve user navigations in the tree.
on node click in the tree the user is redirected to the corresponding page in my site and the clicked node is selected/highlighted thanks to the jsTree cookies integration.
Now, I would like to to select/highlight nodes in the tree also based on a navigation among the web site, i.e., a link in the site might also be a node in the tree, for example, a grid of rows that also appears in the tree.
The question is how can I do this 'manually' node selection/highlighting and I also think that I should know from where the user arrived to the page, from the tree or from some other link in the site.
Thanks,
解决方案 I already built a complete approach for this using jsTree, hashchange event and actual real SEO-able URLs so this would fit into your idea quite simply and you could toss your cookies but not in a bad way. This also works with bookmarking and arriving from a URL as it looks through the nodes then matches the links to select the node. This is best with AJAX though as it should be when possible.
I'm commenting this for you so you can understand it. The working example is here www.kitgui.com/docs that shows all the content.
$(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');
});
Feel free to ask me if you have more questions.
这篇关于jstree - 基于当前导航URL的节点选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
