jQuery 深度链接 & ajax加载到多个容器（子容器）

发布于 2024-08-19 08:45:15 字数 1175 浏览 7 评论 0原文

我目前正在开发一个网站，遇到了一个问题..（ajax加载存储的网址）认为有人可以提供帮助..

首先是示例页面布局：

<div id="main-container">
  <div id="top-menu">
    <a href="/link1" rel="ajax" />Link 1</a>
    <a href="/link2" rel="ajax" />Link 2</a>
  </div>
  <div id="content">
    <div id="results">
    <!-- category results go here -->
      <a href="/link1/category/cat-1/page/1" rel="ajax" />page 1</a>
      <a href="/link1/category/cat-2/page/2" rel="ajax" />page 2</a>         
    </div>
    <div id="categories">
      <a href="/link1/category/cat-1" rel="ajax" />cat 1</a>
      <a href="/link1/category/cat-2" rel="ajax" />cat 2</a>     
    </div>
  </div>
</div>

如果我想通过单击链接加载内容，一切都很好..困难的部分开始当我想启用历史记录支持（创建深层可链接网址）时..

如果给出完整网址，我无法弄清楚如何加载必要的部分，例如

site.com/link1.html#/category/cat-1/page/

我的一些想法：

每个链接都有一个属性，告诉在哪里加载内容
网址是发送到某个控制器，该控制器发送回有关加载位置的数据
散列有多个部分，可以拆分为数组，然后加载每个部分

结果应该有点像 facebook 导航，您可以在主页、消息、朋友列表之间导航无需刷新页面..然后在每个地方您都可以通过子链接导航..

原文

I currently developing a site and have bumped into a problem.. (ajax loading stored urls) Thought someone could help..

First here is sample page layout:

<div id="main-container">
  <div id="top-menu">
    <a href="/link1" rel="ajax" />Link 1</a>
    <a href="/link2" rel="ajax" />Link 2</a>
  </div>
  <div id="content">
    <div id="results">
    <!-- category results go here -->
      <a href="/link1/category/cat-1/page/1" rel="ajax" />page 1</a>
      <a href="/link1/category/cat-2/page/2" rel="ajax" />page 2</a>         
    </div>
    <div id="categories">
      <a href="/link1/category/cat-1" rel="ajax" />cat 1</a>
      <a href="/link1/category/cat-2" rel="ajax" />cat 2</a>     
    </div>
  </div>
</div>

All is well if i want to load content by clicking links.. The hard part starts when I want to enable history support (create deep linkable urls)..

I cant figure out how to load necessary parts if full url is given e.g.

site.com/link1.html#/category/cat-1/page/

Some ideas I have:

Each link has an attribute that tells where to load the content
The url is sent to some controller that sends back data about where to load
The hash has multiple parts and can be split into array and then each part is loaded

Well the result should be somewhat like facebooks navigation where you can navigate between home page, messages, friends list without a page refresh.. And then in each of the places you can navigate by sublinks..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱*していゐ 2024-08-26 08:45:15

tnx :) 看了一下这个..它是一个非常好的插件，但是，经过一番思考后我发现了我缺少的部分..（可能应该包含js代码）

var hash = window.location.hash.substr(1);
var href = $('a[rel=ajax]').each(function(){
    var href = $(this).attr('href');
            var where = $(this).attr('test');
            //alert(where);
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html';
        $('#content_full').load(toLoad)
    }                                           
});

这些是如果哈希被调用的行找到（页面加载后）..（我想让脚本有点太高级..而不是使用加载数据的默认容器，我想从 url 获取位置..（不要问为什么..））

所以现在一切都应该正常工作了:)（我将向每个ajax链接添加一个关于它应该加载到哪个部分的变量，然后该数据将被发送到php脚本，该脚本将输出必要的数据（仅需要的部分），如果不设置此变量，脚本将输出完整内容）

tnx :) had a look on this.. its a really nice plugin, however, after thinking a bit i figured out the part I was missing.. (probably should have included the js code)

var hash = window.location.hash.substr(1);
var href = $('a[rel=ajax]').each(function(){
    var href = $(this).attr('href');
            var where = $(this).attr('test');
            //alert(where);
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html';
        $('#content_full').load(toLoad)
    }                                           
});

those are the lines that are called if hash is found (after page load).. (i wanted to make the script a bit too advanced.. and instead of using a default container where data is loaded i wanted to take the location from url.. (dont ask why..))

so now everything should be working fine :) (I'll add a variable to each ajax link about what section it should load into, this data will then be sent to php script which will output the necessary data (only the wanted section), if this var won't be set the script will output full content)

回复收藏 0 原文