【问题标题】:jQuery address plugin helpjQuery地址插件帮助
【发布时间】:2011-03-02 12:49:29
【问题描述】:

我在了解如何使用 jQuery 地址插件 - http://www.asual.com/jquery/address/- 时遇到了一点困难,我的 jQuery/javascript 知识有限,我会认真挖掘一些帮助!

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

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');
   });
});

我希望这是不言自明的。我有一个ul 的链接,这些链接指向我通过AJAX 加载div 的内容以及idbiog-container。 AJAX 工作正常,并且 url 使用链接的ids 更新,但是当我单击后退按钮时,url 发生变化,但内容保持不变。

有什么想法,我是不是很傻?!

【问题讨论】:

  • 我应该补充一点,我的链接是我正在劫持的常规链接 - 所以链接将指向一个真实的网页,例如:mywebsite.com/this/page/right/here/

标签: jquery ajax jquery-plugins browser-history


【解决方案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 工作正常。

【讨论】:

  • 嗨@Jonathan,感谢您的回复。恐怕你对我设定的标准有点太高了!我真的只是一个卑微的设计师,尽管我尽了最大的努力,但我就是无法让我的大脑理解如何处理这些信息。还有什么窍门吗?!干杯:)
  • 嗨,安迪 - 我已经为你做了更新。希望它能进一步解释事情:)
  • 伙伴,太棒了!我想不通的是如何将点击链接的 url 传递给 address.change 函数...jsfiddle.net/richardsweeney/c5pkG
  • @Richard 传递给address.change 函数的值来自位置对象的哈希值。在上面的示例中,我通过调用 $.address.path(this.id) 将此值设置为链接的 ID。如果您想将此值设置为点击链接的 URL,请将其更改为 $.address.path(this.href);
猜你喜欢
  • 2010-12-22
  • 2010-12-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多