Содержимое подобного сайта подгружается с сервера при помощи AJAX — асинхронного JavaScript и XML. Для реализации работы через AJAX нужна также реализация части приложения на серверной стороне. Обычно используются скриптовые языки. Для удобства работы и масштабирования системы выбирают REST (архитектура взаимодействия частей приложения).
Одностраничное приложение и JavaScript-фреймворки
Для построения одностраничных приложений используют различные фреймворки:
- backbone.js (рус.)- легкий библиотека, написана автором CoffeeScript и используемая для разработки SPA-страниц с поддержкой REST архитектуры
- ember.js (рус.)- тоже бесплатный JavaScript-фреймворк основанный на модули Модели-Представления-Контроллера (шаблон разработки — MVC)
- angular.js (рус.) — фреймворк, MVC. Один из авторов продолжается заниматься фреймворком, работая в Google.
Одностраничный сайт html
Можно построить используя работу с селекторами по идентификатору и целевому селектору :target, CSS-свойства для управлением видимостью содержимого (display, visibility и margin). Шаблоны одностраничного сайта включает все необходимое содержимое для работы посетителя. В этом простейшем случае подключать JS-фреймворки обходимости нет.
Псевдокласс :target позволяет выбрать такие HTML-элементы на странице, атрибут id у которых совпадает со значением хеша из адресной строки. Например, если в адресной строке присутствует URI: http://htmllab.ru/test-po-html#result, то на HTML-странице будет найден элемент с идентификатором #result и к нему применятся CSS-стили.
Каркас такой страницы может выглядеть так (внимание! Для упрощения используется одинаковая высота у всех страниц. На практике объем содержимого буде разным)
.container{
font: 1em sans-serif;
width:600px;
min-height:500px;
margin:auto;
border:1px solid #000;
position: relative;
}
h1,h2,h3,h4,h5,h6 {margin: 0;}
.page{
width:600px;
height:430px;
position: absolute;
top:60px;
display: none;
background-color: #fff;
}
div:first-of-type{
display:block;
z-index: 1;
}
div:target{
display:block;
z-index: 2;
}
Верстка
<div class="container">
<h1>Одностраничный статичный сайт</h1>
<nav>
<a href="#">ссылка1</a>
<a href="#page2">ссылка2</a>
<a href="#page3">ссылка3</a>
<a href="#page4">ссылка4</a>
</nav>
<div class="page" id="page1" >страница 1 одностраничного сайта</div>
<div class="page" id="page2">страница 2 одностраничного сайта</div>
<div class="page" id="page3">страница 3 одностраничного сайта</div>
<div class="page" id="page4">страница 4 одностраничного сайта</div>
</div>
Посмотреть пример работы. Со страницами, использующими JS-фреймворки работа строится другим способом.