2011-03-02 115 views
0

我有一个小小的困难了解如何使用jQuery地址插件 - http://www.asual.com/jquery/address/-与我有限的jQuery/JavaScript的知识,并会认真挖掘一些帮助!jQuery地址插件帮助

到目前为止,我的代码如下所示:

jQuery(function($) { 
    $.ajaxSetup({ cache: false }); 
    var hijax = $('ul.hijax a'); 
    var loader = $('<div id="spinner"></div>'); 
    var container = $('#ajax-container'); 
    hijax.address(function() { 
    dis = $(this); 
    hijax.removeClass('ajax-on'); 
    dis.addClass('ajax-on'); 
    var url = dis.attr('href') + ' #biog-container'; 
    container.html(loader).load(url); 
    return dis.attr('id'); 
    }); 
}); 

哪我希望是相当自我explanitory。我有一个ul指向我通过AJAX加载的页面的链接div的内容与idbiog-container。 AJAX工作正常,URL更新为链接的id,但是当我点击后退按钮时,网址会更改,但内容保持不变。

任何想法,我是愚蠢的?!

+0

我应该补充说我的链接是常规链接,我hijaxing - 所以一个链接将指向一个真实的网页,例如:mywebsite。com/this/page/right/here/ – 2011-03-02 12:59:33

回答

1

说实话,address方法并没有为你工作的方式做太多。实际上,插件不会自动添加支持。

但是,这样做很简单。你只需要设置为change方法处理:

$.address.change(function(e){ 
    // The function receives a single eventobject parameter that contains the 
    // following properties: 
    // value, path, pathNames, parameterNames, 
    // parameters, queryString 

    /* Do something based on e */ 
}); 

当地址发生变化时,你的函数被炒鱿鱼。还有其他的事件internalChangeexternalChange,您可以设置为在地址更改发生在内部或外部时触发。


编辑:只是为了扩大上述:

这是工作的它一个完整的例子。换句话说,你并不需要调用任何其他的插件,它的工作:

// Override the click events of links 
$("a").click(function(e) { 
    e.preventDefault(); 
    $.address.path(this.id); 
}); 

// Method called with the address changes 
$.address.change(function(e) { 
    // This is called when the 
    $("#content").html("Something based on " + e.value); 
}); 

当被点击的链接,它设置地址路径(在插件的术语)到链路的ID。这会生成一个动作,以便后退/前进正确工作。它不会更改链接本身,所以如果JavaScript未启用,它将转到任何链接地址。

$.address.change位设置处理程序。这是您将加载内容的地方。在我的示例中,它使用e.value来获取地址路径的值。所以这可能类似于/link1,/link2等。当链接在内部(通过插件)或外部(通过浏览器后退/前进)改变时,该处理程序被调用。

注意:我注意到这与jQuery 1.5.1完美无瑕。我非常肯定它与改变jQuery 1.5属性选择器(地址插件似乎使用的)有关。尽管jQuery 1.4工作正常。

+0

嗨@Jonathan,谢谢你的回复。恐怕你已经把酒吧设得太高了!我真的只是一个低调的设计师,尽管我尽了最大的努力,但我无法让我的大脑理解如何处理这些信息。更多提示?!欢呼:) – 2011-03-02 13:32:49

+0

嗨安迪 - 我已经为你做了一个更新。希望它进一步解释的东西:) – 2011-03-02 14:46:14

+0

伴侣,这是非常棒!我无法弄清楚的是如何将点击链接的url传递给address.change函数...... http://jsfiddle.net/richardsweeney/c5pkG/ – 2011-03-02 15:48:56