jQuery глубокое связывание и загрузка ajax в нескольких контейнерах - PullRequest
Новая
       26

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

0 голосов
/ 29 января 2010

Я сейчас занимаюсь разработкой сайта и столкнулся с проблемой .. (ajax загрузка сохраненных URL-адресов) Думал, что кто-то может помочь ..

Сначала вот пример макета страницы: 

<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, например, 

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

У меня есть несколько идей:

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

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

Ответы [ 2 ]

1 голос
/ 29 января 2010

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

0 голосов
/ 29 января 2010

Оформить заказ Барбекю Бена Алмана: Плагин "Назад" и библиотека запросов

Упрощает добавление поддержки кнопки назад

.
...