如何創建類似於Github的麪包屑和移位視圖效果

單擊github中的麪包屑鏈接將觸發目錄視圖區域以轉移到子目錄。什麼是達到這種效果的最佳方式。我正在使用asp.net mvc，jquery，jquery ui和一個jQuery佈局插件（http://layout.jquery-dev.net/ui layout）我應該放棄佈局插件嗎？如何創建類似於Github的麪包屑和移位視圖效果

來源

2012-03-31 dan_l

可能重複[如何github更改網址，而無需重新加載頁面？]（http://stackoverflow.com/questions/7591087/how-does-github-change-url-without-reloading-a-page） – 2012-03-31 04:36:19

那麼，你可以從unique url pattern開始。爲了使這個聲音有點熟悉，讓我們舉個例子嘰嘰喳喳：

#searching "stackoverflow" 
https://twitter.com/#!/search/stackoverflow

散列部是後（幷包括）「＃」之一。使用window.location.hash爲我們獲取它。然後用string.replace()刪除#!/並結了：

search/stackoverflow

那麼如果我們存儲這個值作爲一個變量，做string.split('/')，從而分離每/的價值，現在我們又回到這一點：

array = ['search','stackoverflow'];

現在它看起來更像是一個我們可以用來構建的麪包屑。如果你在twitter上，它會更像：

site/search/stackoverflow

對於每個麪包屑鏈接，只需進一步追加。如果你有分段的URL，這是很容易建立鏈接：

site      = mysite.com 
site/search    = mysite.com/search 
site/search/stackoverflow = mysite.com/search/stackoverflow

把滑動部分，你需要拿起「onhashchange」事件，其檢測對哈希值。當你點擊一個有href="#somevalue"的鏈接時，總會發生這個事件 - 注意帶有「＃」的href。你也會注意到這個頁面並沒有去任何地方（這就是AJAX魔術後來發揮的地方）。

現代瀏覽器，你可以使用jQuery或純JS檢測hashchange：

$(window).on('hashchange',function(){ 
    //do whatever you want when the hash changes 
}); 

//or 

window.onhashchange = function(){ 
    //do whatever you want when the hash changes 
}

對舊的瀏覽器，你必須設置，檢查以前的VS的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加載新頁面（取決於您使用解析哈希確定的頁面），追加載入的頁面，滑動內容並繁榮！你完成了。如果知道讓時鐘轉動的齒輪，每個人都很容易做出。

來源

2012-03-31 04:32:47 Joseph

如何創建類似於Github的麪包屑和移位視圖效果

回答

相關問題