Как создавать динамические страницы, используя #?

Я заметил, что многие страницы, такие как Twitter и несколько других сайтов, включили AJAX в свой дизайн. Одна вещь, которая привлекла мое внимание, это использование #! в URL. Мне интересно, как я могу сделать это для себя или метода, который они используют, спасибо!

javascript,jquery,ajax,html5,

1

Ответов: 1

за голосование 4 за голосование

Вы можете начать с чего-то очень простого и использовать плагин Hashchange или BBQ . Прочитайте руководства для обоих, и вы поймете идею.

И вот краткое и общее введение: http://code.google.com/intl/en-EN/web/ajaxcrawling/docs/html-snapshot.html

ОБНОВИТЬ:

Хорошо, давайте возьмем плагин Hashchange в качестве примера. Следующий код очень примитивен, но я думаю, что он поможет понять основную часть

HTML:

<ul>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact Us</a></li>
    <li><a href="/links">Links</a></li>
</ul>

<div id="page"></div>

JS:

$(function(){

    /*
     * We override the default
     * behaviour of our links
     * and change the hash of the URL,
     * e.g. '/contact' -> '#contact',
     * so the address bar of the browser
     * would change to 
     * 'http://example.com#contact'
     */
    $('ul').find('a').click(function() {
        var hash = $(this).attr('href').replace('#', '');
        window.location.hash = hash;

        return false;
    });

    /*
     * The main hashchange logic
     *
     * We use jQuery.load to retrieve
     * a specific part of the loaded document,
     * #page here
     */
    $(window).hashchange(function() {
        var newLoc = window.location.hash.replace('#', '');

        $('#page').load('/' + newLoc + ' #page');
    });

    $(window).hashchange();

});
JavaScript, JQuery, AJAX, html5,
Похожие вопросы
Яндекс.Метрика