JQuery + Ajax Hash / История и многое другое - PullRequest
Новая
       25

JQuery + Ajax Hash / История и многое другое

5 голосов
/ 01 декабря 2009

Я пытаюсь разобраться с использованием URL-хэшей в jQuery для управления историей в Ajax и для создания ссылок / страниц, которые можно добавлять в закладки. Я перепробовал почти все плагины, и я не могу заставить их работать должным образом, поэтому у меня нет примеров кода. Но я открыт для любых предложений, информации, учебных пособий и т. Д.

Разница на одной из страниц, в которую я пытаюсь это встроить, заключается в том, что у меня есть страница-заставка / загрузка, управляемая анимацией jQuery, которая также является той же страницей, на которую будет загружаться весь контент.

.. и по этой ссылке я хочу обойти всю анимацию всплеска / загрузки и напрямую загрузить контент на основе хеш-значений / строки (в данном случае #home).

Я пытался выяснить это некоторое время, любая помощь очень ценится, спасибо!

Ответы [ 2 ]

12 голосов
/ 01 декабря 2009

Так с чем у вас проблемы? Установка хеш-тега или обработка изменения хеш-функции?

Конечно, установка хешей - это просто вопрос размещения хешей в ссылках, например <a href="www.voidsync.com/2010/#page">Link</a>, но я предполагаю, что это не ваша проблема.

Чтобы действительно что-то делать с хэшем, у вас должна быть функция прослушивателя, которая проверяет, например, каждые 100 мс, что хэш изменился и действует соответственно. Простая функция может выглядеть так: 

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

Эта (непроверенная) функция будет каждые 100 мс проверять, изменился ли хеш и, если он изменился, обновить страницу через Ajax.

Эта функция также работает при загрузке страницы, поэтому, если пользователь попадает на страницу со ссылкой, такой как www.voidsync.com/2010/#images, функция автоматически загрузит «изображения» страницы. Так работает история и закладки.

Надеюсь, это поможет, просто спросите, не имели ли вы в виду что-то еще.

1 голос
/ 16 сентября 2011

Исходя из ответа Тату, я просто изменил несколько вещей, чтобы сделать эту работу для меня. Он хранит историю, поэтому кнопки назад и вперед работают хорошо. Вот что у меня есть, 

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

Затем просто назначьте некоторые хэши атрибуту links href; 

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

Это не полное переписывание, просто добавлено несколько операторов if к одной и той же вещи, но это может кому-то помочь.

...