Пуленепробиваемый обозреватель

jQuery

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

jQuery

Начинаем

Во-первых, давайте создадим базовую HTML-страницу для нашего обозревателя; в новом файле вашего текстового редактора создайте следующую страницу:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Bullet-proof Content Viewer</title>
        <link rel="stylesheet" type="text/css" href="contentviewer.css">
	</head>
	<body>
    	<div id="viewer">
        	<ul id="nav">
            	<li class="thumb1"><a href="#panel1" title="Panel 1">Panel 1</a></li>
				<li class="thumb2"><a href="#panel2" title="Panel 2">Panel 2</a></li>
				<li class="thumb3"><a href="#panel3" title="Panel 3">Panel 3</a></li>
				<li class="thumb4"><a href="#panel4" title="Panel 4">Panel 4</a></li>
				<li class="thumb5"><a href="#panel5" title="Panel 5">Panel 5</a></li>
			</ul>
			<div id="panels">
				<div id="slider">
               		<div id="panel1">
                    	<img src="img/image1.jpg" alt="Image 1">
						<p>Supernova 1994D, visible as the bright spot at the lower left, occurred in the outskirts of the disk galaxy NGC 4526.</p>
	               	</div>
 					<div id="panel2">
                    	<img src="img/image2.jpg" alt="Image 2">
						<p>Radiation from hot stars off the top of the picture illuminates and erodes this giant, gaseous pillar.</p>
					</div>
					<div id="panel3">
	               		<img src="img/image3.jpg" alt="Image 3">
	 					<p>V838 Mon is located about 20,000 light-years away from Earth at the outer edge of the Milky Way.</p>
					</div>
					<div id="panel4">
	               		<img src="img/image4.jpg" alt="Image 4">
						<p>The Sombrero Galaxy is an unbarred spiral galaxy in the constellation Virgo approximately 30 million lights years away.</p>
					</div>
               			<div id="panel5">
	               		<img src="img/image5.jpg" alt="Image 5">
						<p>This region of active current star formation is part of a diffuse emission nebula about 6,500 light-years away.</p>
					</div>
				</div>
			 </div>
		</div>
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		</script>
	</body>
</html>

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

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

Основные изображения добавляются в документ как надлежащие HTML-изображения, использующие элемент <img>, — потому что они являются содержимым и должны быть видимы вспомогательными технологиями или пользователями, не имеющими возможности пользоваться как сценариями, так и CSS, или чем-либо иным. Структуры навигации также содержат изображения, но так как они не классифицируются в качестве содержимого, им нет необходимости быть видимыми во всех случаях и, таким образом, и они могут быть добавлены при помощи CSS, как дополнительные имена классов в элементы <li>.

Сейчас страница должна выглядеть таким образом:

jQuery

Смотрится пока не очень прекрасно, но документ работает правильно и элементы отчетливо видны и ими уже можно пользоваться.

Запускаем просмотр с помощью CSS

Теперь мы можем воспользоваться CSS, чтобы трансформировать обозреватель содержимого в работающий интерфейс, который уже не будет выглядеть ужасно. Мы уже связали таблицу стилей в начале нашей страницы, так что давайте сделаем вот что: в новом файле, в текстовом редакторе, добавьте следующие секции и правила:

#viewer { width:700px; margin:auto; }
#nav { width:200px; float:left; margin:0; padding:0; list-style-type:none; }
#nav li { width:200px; height:100px; padding:0; }
#nav li a { display:block; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background:url(img/thumbs.png) no-repeat 0 0; }
#nav li a:hover, #nav li a.on { background-position:-200px 0; }
#nav li.thumb2 a { background-position:0 -100px; }
#nav li.thumb2 a:hover, #nav li.thumb2 a.on { background-position:-200px -100px; }
#nav li.thumb3 a { background-position:0 -200px; }
#nav li.thumb3 a:hover, #nav li.thumb3 a.on { background-position:-200px -200px; }
#nav li.thumb4 a { background-position:0 -300px; }
#nav li.thumb4 a:hover, #nav li.thumb4 a.on { background-position:-200px -300px; }
#nav li.thumb5 a { background-position:0 -400px; }
#nav li.thumb5 a:hover, #nav li.thumb5 a.on { background-position:-200px -400px; }
#panels { width:500px; height:500px; overflow:hidden; position:relative; float:left; }

Сохраните как contentviewer.css в той же директории, что и HTML-страницу. Я придерживался минималистского дизайна, чтобы мы могли сконцентрироваться на том, что заставляет его работать; навигация и панель просмотра свободно перемещаются относительно друг друга, и каждому элементу списка заданы индивидуальные фоновые изображения и состояния hover.. Далее мы еще добавим состояние on (включено). Эта часть CSS касается исключительно макетов/презентации и никак не влияет на функциональность.

Важно то, как устроены контейнеры и изображения содержимого. Внешнему контейнеру (#panels) задан фиксированный размер, который соответствует высоте и ширине отдельного изображения содержимого, а свойство overflow (переполнение) установлено на hidden (скрывать), так что в одно и то же время показывается одно единственное изображение. Это единственный стиль CSS действительно необходимый для работы обозревателя содержимого. Если вы сейчас посмотрите на страницу, то увидите, что можно нажать на любой из эскизов и на панели просмотра будет показано соответствующее полноразмерное изображение:

jQuery

Это очень хорошо, так как все остается функциональным и доступным, даже не полагаясь на JavaScript. Далее мы перейдем к использованию jQuery, который позволит нам мгновенно добавить эффектных плавных переходов, но сначала нам нужно немного стилей, которые требуются для наших анимаций, а также для того, чтобы правильно отображались параграфы текста. Добавьте следующий код в нижнюю часть contentviewer.css:

#slider { width:2500px; height:500px; }
#slider div { float:left; position:relative; }
#slider p { position:absolute; bottom:0; left:0; color:#fff; font:16px &quot;Trebuchet MS&quot;; margin:0; width:90%; height:45px; padding:5px 5% 10px; background-color:#000; }

Внутреннему контейнеру (#slider) придается фиксированная высота, равная отдельному изображению содержимого, но ширина, равная всем изображениям. Затем индивидуальные контейнеры, содержащие изображения и текст, сдвигаются влево, чтобы можно было выстроить их по горизонтали. И наконец, придаются стили параграфам текста, и их позиционируют таким образом, чтобы они перекрывали каждое изображение:

jQuery

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

Здесь я должен уточнить, что этот код пока не работает в Opera; по некоторым причинам Opera не может использовать якоря на странице для показа различных панелей содержимого при нажатии на один из элементов навигации. Этот серьезный сбой представляется проблемой во многих версиях Opera. По-видимому, его можно исправить, и те, кто использует Opera в качестве своего основного браузера, надеюсь, уже придумали, как все починить. Хотя это не проблема, когда включен JavaScript.

Добавляем эффекты jQuery

Так как страница уже работает самостоятельно, мы можем добавить немного JavaScript, который превратит просто функциональную страницу в привлекательный интерфейс. Мы оставили пустой элемент <script> внизу нашей страницы, теперь давайте его заполним, и начнем со следующего кода:

function($){
	//code here...
	})(jQuery);

Первое, что мы делаем в этом блоке кода — убеждаемся, что символ $ будет всегда относиться к объекту jQuery; даже если этот код будет использоваться на странице с другой библиотекой JavaScript, которая также использует символ $. Для этого мы создаем псевдоним для jQuery, соответствующий символу $, методом передачи объекта jQuery в самоисполняющуюся анонимную функцию. Эту тонкость я выудил из великолепной книги Cody Lindley «jQuery Enlightenment».

Добавьте внутрь нашей самоисполняющейся анонимной функции остаток кода:

//object containing margin settings
var margins = {
	panel1: 0,
	panel2: -500,
	panel3: -1000,
	panel4: -1500,
	panel5: -2000
}

//handle nav click
$("#nav a").click(function(e){

	//stop browser default
	e.preventDefault();

	//remove on states for all nav links
	$("#nav a").removeClass("on");

	//add on state to selected nav link
	$(this).addClass("on");

	//set margin of slider to move
	$("#slider").animate({
		marginLeft: margins[$(this).attr("href").split("#")[1]]
	});
});

Во-первых, мы определяем простой объект, который используется для фиксации позиций полей каждой из панелей; для показа первой панели левое поле контейнера #slider должно быть установлено на 0, для показа второй – на -500px и так далее, и так далее. Используя объект таким образом, можно легко сохранить эти значения для каждой панели.

Далее мы добавляем обработчик щелчка для элементов навигации; нам нужно показывать панели с помощью хорошей анимации, поэтому необходимо предотвратить обработку URL браузером. Мы добиваемся этого, используя объект события (e), который передаем в обработчик щелчка. Объект события имеет встроенный метод preventDefault(), поэтому мы вызываем его в объект события, и он останавливает исполнение браузером действий по умолчанию.

Далее, мы используем часть скрипта для установки класса on текущему выбранному элементу навигации; это единственная часть сценария, которая в своем функционировании полностью основывается на JavaScript и просто удаляет класс on из любых элементов, на которых тот существует, а затем добавляет обратно элементу, на который нажали. Можно это сделать исключительно при помощи CSS, используя псевдокласс :active, но так как это служит только визуальной помощью, не думаю, что так уж много значит, если аспект не работает с отключенным сценарием.

Теперь нужно показать правильную панель при помощи контейнера #slider. Помните, мы для этого устанавливаем свойство стиля margin-left у панели #slider. Для установки правильного значения marginLeft на основании того, какая из навигационных ссылок нажата, мы просто получаем атрибут href, используя ссылку на $(this) (которая указывает, на какую ссылку нажали) и с помощью стандартной функции JavaScript split, по символу # находим имя панели.

Мы делаем это наиболее семантическим способом – используя информацию, которая у нас уже есть, в этом случае – атрибут href. Мы могли бы добавить атрибуты id к каждой из ссылок навигации, но так мы добавим ненужную информацию в наш сценарий, чего следует избежать. Использование href имеет смысл, но мы не можем использовать # в начале объектных ключей (panel1, panel2, и так далее), так что нужно избавиться от этого знака в возвращаемом значении.

Сохраните страницу и просмотрите ее в своем браузере; вы должны видеть, что когда одна из навигационных ссылок нажата, в область зрения плавно вдвигается соответствующая панель. Осталось одна вещь, которую нужно сделать – описательные параграфы не должны быть все время видимы (пока включен JavaScript), поэтому они должны быть по умолчанию скрыты и показаны только в том случае, когда над изображением содержимого проводят мышью. Добиться этого можно легко, используя совсем чуть-чуть скрипта; сразу после обработчика щелчка добавьте следующий код:

//hide descriptive text
$("#slider p").hide();

Скрывая параграф при помощи JavaScript, мы гарантируем, что содержимое будет скрыто только при включенном сценарии. Это значит, что содержимое остается видимым, даже если у клиента выключен JavaScript. Далее, нам нужно просто показать текст, когда над основным изображением проводят мышью, и чтобы этого добиться, можно использовать метод jQuery hover(); после только что добавленного кода продолжите:

//show descriptive text on mouseover (hide on mouseout)
$("#slider").hover(
	function() {
		$(this).find("p").slideDown();
	}, function() {
		$(this).find("p").slideUp();
});

Все, что мы делаем – используем методы slideDown() и slideUp() внутри метода hover() для демонстрации и скрытия параграфов при необходимости.

Заключение

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


Семантический HTML – это метод написания HTML, который подчеркивает смысл закодированной информации через ее вид. HTML включает семантическую разметку с отправной точки, но также включает и презентационную разметку, такие тэги как <font>, <i> и <center>, а также семантически нейтральные тэги, такие как span и div.

Скачать исходники zip архивом

Просмотр Demo

Автор: Dan Wellman

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Эдуард

    Установил на сайт.(пока в Denwer-е)
    Работает во всех (основных) браузерах.
    Только вывел превьюшки в отдельное «меню».
    Очень просто и очень красиво!
    Спасибо!

  2. Эдуард

    Здравствуйте!
    Как только вышла эта статья, ломал голову, как бы применить такую чудесную вещь!!!
    Подвернулся случай: kea.ucoz.ru/index/nashi_dostizhenija/0-86#
    Спасибо!!!
    P.S. На сервере шли работы, не работал JavaScript ОБОЗРЕВАТЕЛЬ РАБОТАЛ КАК-НИ-В-ЧЁМ-НЕ-БЫВАЛО!!!!!!!!!!!!
    Ещё раз спасибо!!!!!!!!!!!!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree