Эффективное использование Hashbang, JavaScript, PHP и AJAX с динамическим контентом

#php #javascript #jquery #ajax #hashbang

#php #JavaScript #jquery #ajax #hashbang

Вопрос:

Я собирал веб-страницу для настольного приложения, которое я начал разрабатывать, и мне бы очень хотелось воспользоваться преимуществами технологий HTML5 и динамического контента с помощью JavaScript. В принципе, если кто-то посещает «корневую» страницу (index.php , или просто название каталога) в их браузере будут видны разделы «Информация», «О программе», «Часто задаваемые вопросы» и контактная форма (за исключением контактной формы; нажатие на заголовок ее раздела вызовет анимацию jQuery для отображенияэто). В левой части страницы у меня есть базовая навигация со ссылками на home, about, часто задаваемые вопросы и контакты. Якорями для этих ссылок являются «#! / home», «#! / about», «#! /faq» и «#!/contact» (соответственно). При нажатии на один из них JavaScript / jQuery скроет все элементы, кроме верхнего, нижнего колонтитула и раздела, к которому относится hashbang (для контактной формы он также удалит обработчик кликов для заголовка раздела, потому что ему не нужно и не должно быть возможностибыть скрытым, когда это единственное содержимое страницы). В настоящее время я использую это:

 window.onload = (function() {
    switch(location.hash) {
    case "#!/contact":
        $("body > *:not(section#contact, nav, header, footer)").hide();
        $("#contact > #labels, #contact > form").slideDown('slow');
    // and similar for the other hashbang URIs
    }

    if (location.hash == "#!/" || location.hash == "#!/home" || !eval(location.hash)) {
        $("a[href='#!/contact']").click(function() {
            $("#contact > #labels, #contact > form").slideDown('slow');
        });
    }
    // similar for the other hashbangs
});
 

Я почти уверен, что есть лучший способ сделать это, и я также хотел бы убедиться, что эта страница и ее динамическое содержимое доступны для сканирования ботами Google. Должен ли я использовать PHP, чтобы сделать это правильно? Как так?

Спасибо!

Ответ №1:

В этом видеоуроке Криса Койера по CSS-трюкам рассматриваются некоторые рекомендации по реализации чего-то подобного. Главное — убедиться, что ваше приложение будет работать с включенным JavaScript или без него.