JavaScript переключатель контента работающий без JavaScript


Недавно, проводя исследования совершенно не имеющие отношения к теме, я наткнулся на прекрасные иллюстрации Rype Arts, которые отображались внутри JavaScript переключателя, явно работающего на JavaScript. По некоторой причине, так случилось что я посетил станицу с настройками, которые запрещали исполнение JavaScript и я обнаружил, что переключатель слайдов всё равно продолжал работать (хотя и с некоторыми недостатками).

Демонстрация

Сначала, я никак не мог понять как это работает. Нормально, с отключенными скриптами, этот тип переключателя слайдов должен был вывести только один пункт, или вывести все пункты без возможности переключения между слайдами. Немного поковырявшись, я понял, что на самом деле всё это несложно реализовать. Переключатель использует внутри страничные якоря и overflow:hiddenчто и обеспечивает функцию переключения.

Вот код HTML, который я буду использовать для демонстрации этого эффекта без использования JavaScript:

<div id="content-slider"> 
<ul id="content-slider-inside"> 
<li id="one">1</li> 
<li id="two">2</li> 
<li id="three">3</li> 
<li id="four">4</li> 
<li id="five">5</li> 
</ul> 
</div> 

<ul id="navigation"> 
<li><a href="#one">1</a></li> 
<li><a href="#two">2</a></li> 
<li><a href="#three">3</a></li> 
<li><a href="#four">4</a></li> 
<li><a href="#five">5</a></li> 
</ul> 

Ключевая часть этого кода - это <div>с идентификатором id “content-slider”. По нормальному это элемент не должен быть необходим, потому, что вроде бы он ничего и не делает. В этом случае, тем не менее, он нужен для того, что бы скрывать невыбранный контент внутри списка, размещенного внутри него. Также, каждый элемент списка внутри переключателя слайдов имеет уникальный id, который нужен, что бы переключение работало даже без применения JavaScript.

CSS для оформления переключателя слайдов таков (я исключил все несоответствующие стили):

#content-slider { 
width: 650px; 
overflow: hidden; 
height: 300px; 
} 

#content-slider-inside { 
list-style: none; 
height: 320px; // these 3 lines 
overflow: scroll; // help Opera 
overflow-y: hidden; // behave 
} 

#content-slider-inside li { 
width: 650px; 
height: 300px; 
} 

Несколько замечаний для выше упомянутых стилей. Внешний контейнер установлен в состояние overflow:hidden. Он также имеет ширину, равную ширине окна слайда (650px). Наконец, элементы списка имеют размеры 650px на 300px. Поскольку элемент контейнера равен одному слайду из списка и контейнер скрывает переполнение, только один элемент списка будет отображен.

Как это работает

Навигационные ссылки привязаны к внутренним якорям. Страница HTML, по умолчанию будет искать страницу с якорем, установленным как <a name="one"></a>, и если не найдет, будет подбирать якорь к соответствующему атрибуту id. Это позволит переключателю уверенно изменять контент внутри контейнера.

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

Источник

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

2 комментария

  1. Вячеслав05/08/2013
  2. BlacKKaT12/03/2011

Добавить коментарий

6 − шесть =