2009-12-21 121 views
0

我正在創建一個網站,其中使用了「錨定導航」,就像使用Facebook和Google郵件一樣。我有它的工作,但不完全。當我加載類似#contact之類的頁面時,它將不會加載它,除非我單擊它的鏈接。另外,是否會有更好,更有效的方式來做我正在做的事情?我不是JS編程的最佳人選。Javascript錨定導航

的JavaScript

$.navigate = function() { 
    // a new link 
    if($anchor != document.location.hash){ 
    // add a preloader 
    $("#content") 
     .empty() 
     .html('<p class="align-center"><img src="assets/images/loading.gif" /></p>'); 
    // change the anchor saved for next time 
    $anchor = document.location.hash; 
    // get the variables ready for the get 
    var i = $anchor.substring(1).split("/"); 
    var $page = i[0]; 
    var $y = (i[1]) ? i[1] : false; 
    // get the file 
    $.get("callback.php", { x: $page, y: $y }, function(data){ 
     $("#content") 
     .empty() 
     .html(data); 
    },"html"); 
    } 
}; 

$(function() { 

    var $anchor = ""; 
    // change from the URI. This dont work. 
    if(document.location.hash){ $.navigate(); } 

    $("a","#nav") 
    .css({backgroundColor:"#f7f7f7"}) 
    .each(function() { 
     $(this).attr("href","#" + $(this).attr("name")); 
    }); 

    setInterval('$.navigate()', 300); 

}); 

HTML:

<div id="nav"> 
    <ul class="horizontal-nav"> 
    <li><a href="http://streetmafia.co.uk/" name="index">Home</a></li> 
    <li><a href="http://streetmafia.co.uk/about" name="about">About</a></li> 
    <li><a href="http://streetmafia.co.uk/portfolio" name="portfolio">Portfolio</a></li> 
    <li><a href="http://streetmafia.co.uk/contact" name="contact">Contact</a></li> 
    </ul> 
    <div id="l-nav"></div> 
    <div id="r-nav"></div> 
</div> 
+0

不要忘記接受答案。 – fserb 2010-01-03 03:59:57

回答

1

同上ReallysimpleHistory插件。 我不知道我完全理解你的代碼,但我會把它分成兩個功能:

  1. 一個人的AJAX加載(包括顯示預加載)
  2. 另一種檢查當前哈希(從URL),並調用上一個函數

在你的「$(function(){...」)中,你先調用第二個函數(只是一次),然後將鏈接的click事件綁定到第一個函數 你可以使用$(this).attr('name')在加載函數中獲得散列。

簡單的例子(未測試:P):

function ajaxLoad() 
{ 

var anchor; 

// Check to see if it's being called from an event 
if ($(this).length > 0) 
{ 
    anchor = $(this).attr('name'); 
} 
else 
{ 
    anchor = document.location.hash; 
} 

} 
0

你可能想看看jQuery的歷史項目: http://www.balupton.com/projects/jquery-history

更全功能,更容易一點比其他人實施,加上支持,如果太棒了。還有一個全功能的AJAX擴展它,讓您輕鬆Ajax請求集成到你的國家/ hash從而將您的網站變成一個全功能的Web 2.0應用程序: http://www.balupton.com/projects/jquery-ajaxy

下面是使用jQuery歷史的例子(從演示站點獲取):

// Bind a handler for ALL hash/state changes 
$.History.bind(function(state){ 
    // Update the current element to indicate which state we are now on 
    $current.text('Our current state is: ['+state+']'); 
    // Update the page"s title with our current state on the end 
    document.title = document_title + ' | ' + state; 
}); 

// Bind a handler for state: apricots 
$.History.bind('/apricots',function(state){ 
    // Update Menu 
    updateMenu(state); 
    // Show apricots tab, hide the other tabs 
    $tabs.hide(); 
    $apricots.stop(true,true).fadeIn(200); 
}); 

和jQuery Ajaxy()的一個例子來自演示網站採取:

 'page': { 
      selector: '.ajaxy-page', 
      matches: /^\/pages\/?/, 
      request: function(){ 
       // Log what is happening 
       window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]); 
       // Adjust Menu 
       $menu.children('.active').removeClass('active'); 
       // Hide Content 
       $content.stop(true,true).fadeOut(400); 
       // Return true 
       return true; 
      }, 
      response: function(){ 
       // Prepare 
       var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state; 
       // Log what is happening 
       window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state); 
       // Adjust Menu 
       $menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active'); 
       // Show Content 
       var Action = this; 
       $content.html(data.content).fadeIn(400,function(){ 
        Action.documentReady($content); 
       }); 
       // Return true 
       return true; 

而且如果你想要得到的查詢字符串PARAMS(這樣yoursite/page.html#page1?a.b=1&a.c=2),你可以使用:

$.History.bind(function(state){ 
    var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}} 
} 

所以檢查出這些演示鏈接,看到他們的行動,併爲所有安裝和使用的詳細信息。