Ну, вы можете начать с использования уникального шаблона URL . Чтобы сделать этот звук немного знакомым, давайте возьмем для примера твиттер:
#searching "stackoverflow"
https://twitter.com/#!/search/stackoverflow
часть хэша - та, что после (и включая) "#". использование window.location.hash дает нам это. затем используйте string.replace() для удаления #!/ и в конечном итоге наберите:
search/stackoverflow
, затем, если мы сохраним это значение как переменную и выполним string.split('/'), который делит значение на /, мы получим следующее:
array = ['search','stackoverflow'];
теперь это больше похоже на крошку, которую мы можем использовать для сборки. если бы вы были в твиттере, это было бы больше похоже на:
site / search / stackoverflow
и для каждой ссылки на хлебную крошку просто добавьте дальше. если у вас есть сегментированные URL-адреса, создать ссылки довольно просто:
site = mysite.com
site/search = mysite.com/search
site/search/stackoverflow = mysite.com/search/stackoverflow
для скользящей части вам нужно выбрать событие onhashchange, которое обнаруживает изменения в значении хэша. Событие всегда происходит, когда вы нажимаете на ссылку, которая имеет href="#somevalue" - обратите внимание на href, имеющий "#". Вы также замечаете, что страница никуда не уходит (вот где магия AJAX начинает играть позже).
для современных браузеров вы можете обнаружить hashchange, используя jQuery или простой JS:
$(window).on('hashchange',function(){
//do whatever you want when the hash changes
});
//or
window.onhashchange = function(){
//do whatever you want when the hash changes
}
для более старых браузеров, вы должны установить таймер, который проверяет предыдущее и текущее значение window.location.hash
(function timer(prevHash){
var currentHash = window.location.hash;
if(prevHash !== currentHash){
//do whatever you want when the hash changes
}
setTimeout(function(){
timer(currentHash);
},1000);
}();
Эффект скольжения может быть достигнут с помощью jQuery .animate(). Вы можете загрузить новую страницу через AJAX (в зависимости от страницы, которую вы определили с помощью проанализированного хэша), добавить загруженную страницу, сдвинуть содержимое и всплыть! вы сделали. Все довольно легко сделать, если они знают механизмы, которые заставляют часы вращаться.