Глубокие ссылки jQuery и загрузка ajax в нескольких контейнерах (субконтейнерах)

В настоящее время я разрабатываю сайт и столкнулся с проблемой .. (загрузка сохраненных URL-адресов 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>

Все хорошо, если я хочу загружать контент, щелкая ссылки. Трудная часть начинается, когда я хочу включить поддержку истории (создать URL-адреса с глубокими ссылками)..

Я не могу понять, как загрузить необходимые части, если указан полный URL, например.

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

Некоторые идеи у меня есть:

  1. Каждая ссылка имеет атрибут, указывающий, куда загружать контент.
  2. URL-адрес отправляется на какой-то контроллер, который отправляет обратно данные о том, где загрузить
  3. Хэш состоит из нескольких частей и может быть разделен на массив, а затем загружается каждая часть.

Что ж, результат должен быть чем-то вроде навигации в Facebook, где вы можете перемещаться между домашней страницей, сообщениями, списком друзей без обновления страницы.. И затем в каждом из мест вы можете перемещаться по подссылкам..


deep-linking jquery ajax load history
person Tom    schedule 28.01.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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-скрипт, который выведет необходимые данные (только нужный раздел), если этот var не будет установлен, скрипт выведет полный контент)

person Tom    schedule 28.01.2010

arrow_upward
0
arrow_downward

Ознакомьтесь с Ben Alman's BBQ: плагин кнопки "Назад" и библиотеки запросов

Позволяет очень легко добавить поддержку кнопки «Назад»

person PetersenDidIt    schedule 28.01.2010