Implementing deeplinking with multiple levels
I need to implement deeplinking for开发者_如何学运维 my site as it's built heavily in AJAX. I understand the basic idea and have got deeplinking implemented for my top level nav. Problem is my site has multiple levels. A user can click on the top nav, which adds to the hash and then click on a secondary nav and a tertiary nav. I also need to add this secondary and tertiary nav click in to the hash...and then also be able to remove that item when the user clicks back on a primary nav item. I can't think of a way to do this...any ideas?
Oh and the code (jQuery) I'm using to achieve the hashing on the primary nav is:
updateHash : function(hash) {
var hashHistory = [];
location.hash = hash;
}
I' not quite sure what you are looking for. Maybe you should show some concrete examples. Until then how about something like this:
function updateHash(hashPath) {
if (hashPath.charAt(0) == "/") {
location.hash = "#" + hashPath;
return;
}
var currentHash = location.hash.split(/\//);
if (currentHash[0]) currentHash[0] = currentHash[0].substr(1); // Loose the #
var relHash = hashPath.split(/\//);
var part;
while (part = relHash.shift()) {
if (part == "..") {
currentHash.pop();
} else {
currentHash.push(part);
}
}
if (currentHash.length > 0)
location.hash = "#" + currentHash.join("/");
else
location.hash = "";
}
Examples:
updateHash("/topLevelItem");
alert(location.href); // "www.example.com/#/topLevelItem"
updateHash("secondLevelItem");
alert(location.href); // "www.example.com/#/topLevelItem/secondLevelItem"
updateHash("thirdLevelItem");
alert(location.href); // "www.example.com/#/topLevelItem/secondLevelItem/thirdLevelItem"
updateHash("../differentThirdLevelItem");
alert(location.href); // "www.example.com/#/topLevelItem/secondLevelItem/differentThirdLevelItem"
updateHash("../../differentSecondLevelItem");
alert(location.href); // "www.example.com/#/topLevelItem/differentSecondLevelItem"
updateHash("../anotherSecondLevelItem/anotherThirdLevelItem");
alert(location.href); // "www.example.com/#/topLevelItem/anotherSecondLevelItem/anotherThirdLevelItem"
updateHash("..");
alert(location.href); // "www.example.com/#/topLevelItem/anotherSecondLevelItem"
精彩评论