Простой ajaxify, без URL-адресов хеш-бэгов - PullRequest
2 голосов
/ 19 февраля 2012

Я прохожу курс веб-дизайна. Я и многие другие студенты действительно заинтересованы в том, чтобы изменить нашу работу. Наш учитель занимается только дизайном и HTML - поэтому он не может помочь.

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

Например, допустим, у меня есть веб-страница, состоящая из 3 подстраниц:

1: index.html

<!DOCTYPE html><html><head><title> Welcome! </title></head>
<body>
    <div id="Content"> Welcome, dear visitor... take a look around! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"><b> Home </b></a></li>
            <li><a href="projects.html"> Projects </a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

2: projects.html

<!DOCTYPE html><html><head><title> Projects </title></head>
<body>
    <div id="Content"> All my projects are shown here! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"> Home </a></li>
            <li><a href="projects.html"><b> Projects </b></a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

3: contact.html

<!DOCTYPE html><html><head><title> Contact </title></head>
<body>
    <div id="Content"> Contact info! </div>
    <div id="Menu">
        <ul>
            <li><a href="index.html"> Home </a></li>
            <li><a href="projects.html"> Projects </a></li>
            <li><a href="contact.html"><b> Contact </b></a></li>
        </ul>
    </div>
    <div id="Footer"> Email and mediaplayer </div>  
</body></html>

При использовании ссылок:

  • Только Content-div должен быть перезагружен.

  • Меню должно обновить, какой пункт меню активен (здесь показан жирным шрифтом). Если это слишком сложно, перезагрузка меню может сработать.

  • Нижний колонтитул вообще не должен перезагружаться.

  • Название должно быть обновлено.

  • URL должен быть обновлен.

  • Мне бы очень хотелось, чтобы URL были чистыми. То есть: НЕ / # projects.html или / # / projects.html , а просто просто / projects.html или / projects

  • Рабочие закладки и кнопка возврата имеют решающее значение.

Возможно ли это вообще? Я был бы всегда безумно благодарен любому, кто помогает мне здесь! :-D Я опробовал (и взломал) плагины jQuery Address и History, History.js и 'gist' . Не могу заставить все это работать. Я тралил и трал переполнял стек и гугл, но не могу найти никого, кто объясняет эти вещи или имеет простое решение.

Было бы неплохо решение для современных веб-браузеров. Если парни из IE и парни без javascripts просто получат простую html-версию, это было бы круто - но это не является абсолютно необходимым.

Пожалуйста, помогите - любая помощь будет очень и очень признательна! Thanx! : -)

1 Ответ

3 голосов
/ 19 февраля 2012

То, что вы хотите, возможно, но не совсем легко.
Как уже упоминалось, API истории HTML5 делает это возможным, но вам потребуются хорошие знания javascript.Отображение более или менее статических страниц не совсем то, для чего оно предназначено, но ради обучения давайте подумаем, как это можно сделать.

Возможно, вы захотите использовать такую ​​среду, как магистраль , которая уже поставляется с маршрутизатором, чтобы вам не приходилось писать собственные абстракции.

Основная идеяЗа клиентским маршрутизатором стоит простой способ определить, какой URL-адрес запускает функцию javascript, подобную этой:

var routes = {
    "index": "open_index",
    "projects": "open_projects",
    "contact": "open_contact"
}

var open_index = function(){
    // Do the logic that has to be done
    // to open the index page
}

...

Обратите внимание, что код предназначен только для иллюстрации идеи, он не соответствуетк любой реальной структуре или библиотеке.

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

Теперь у вас есть два варианта:тот.Либо вы извлекаете HTML с сервера и просто подключаете его, либо вы извлекаете только фактические данные в JSON и используете шаблоны на стороне клиента.

Что это значит?Ну, прямо сейчас вы используете статические HTML-страницы.Они имеют базовую структуру, которая является общей для всех страниц, а именно разделение в «Контенте», «Меню» и «Нижнем колонтитуле», однако, поскольку это не веб-приложение, а веб-сайт, содержимое «Контента»«вероятно, не следует структуре, которая представляет некоторые структурированные данные.
Примером для представления структурированных данных будет телефонный справочник.У вас всегда есть список «Имя», «Фамилия», «Номер телефона», и это в первую очередь определяет страницу.То, как это выглядит, не то, о чем страница.

Все содержимое страницы может быть определено с помощью массива, подобного этому:

var people = [
 { "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
 { "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
 ...
]

, и отрисовывается на стороне клиента с использованием простого шаблона, например:

<ul class="phone_book">
  {{#each people}}
  <li>{{firstName}} {{lastName}} - {{number}}</li>
  {{/each}}
</ul>

для генерации необходимого HTML.(Кстати, это было руль )
Используя платформу, вы можете легко настроить его для скрипта, чтобы он автоматически обновлял отображение информации при обновлении данных - например, с помощью AJAX.

В вашем случае, однако, наиболее вероятно, что то, как выглядит страница, является тем, о чем она.Вам нужно одно изображение здесь и одно изображение там и немного текста между ними, и все это меняется с каждой страницей.Вам нужен HTML.
Вот почему вы хотите не совсем то, для чего вы будете использовать History API и AJAX.Он в первую очередь предназначен для сложных веб-приложений, которым необходимо распространять несколько страниц со своими собственными URL-адресами, которые также могут потенциально отражать состояние приложения, так что становится возможной ссылка на определенную часть тяжелого веб-приложения на JavaScript.Загрузка статических веб-сайтов работает отлично, без использования AJAX и History API.

Давайте проигнорируем это прямо сейчас и продолжим в любом случае.Давайте попробуем и посмотрим, что должна работать функция open_index.

var open_index = function(){
    // 1. Fade out the old content and remove it
    // 2. Request the new html content from the server
    // 3. Mark the new active link in the navigation
    // 4. Add the content to the DOM
    // 5. Fade in the new content
}

Все это вы легко можете сделать с помощью jQuery.У вас не будет проблем с поиском объяснения, как это сделать.

Теперь вы почти у цели.Единственное, о чем нужно позаботиться, это убедиться, что вы перехватываете события щелчка для своей навигации, чтобы вы могли использовать History API, и он не будет просто загружать статическую страницу с самого начала.

Дляпростое использование, подобное этому, не намного больше, необходимо по структуре.

Я скажу это снова.Это полное излишество для вашей цели, и вы не должны использовать его для других целей, кроме как для обучения.Если вы не используете библиотеку, которая немного абстрагирует History API, код станет намного сложнее.

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

...