Куленепробивний оглядач

18

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

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

Також завантажте вихідні коди собі на комп’ютер!

Куленепробивний оглядач

Починаємо

По-перше, давайте створимо базову HTML-сторінку для нашого оглядача; у новому файлі вашого текстового редактора створіть наступну сторінку:

Bullet-proof Content Viewer

  • Panel 1
  • Panel 2
  • Panel 3
  • Panel 4
  • Panel 5
Куленепробивний оглядач

Supernova 1994D, visible as the bright spot at the lower left, occurred in the outskirts of the disk galaxy NGC 4526.

Куленепробивний оглядач

Radiation from hot stars off the top of the picture illuminates and erodes this giant, gaseous pillar.

Куленепробивний оглядач

V838 Mon is located about 20,000 light-years away from Earth at the outer edge of the Milky Way.

Куленепробивний оглядач

The Sombrero Galaxy is an unbarred spiral galaxy in the constellation Virgo approximately 30 million lights years away.

Куленепробивний оглядач

This region of active current star formation is part of a diffuse emission nebula about 6,500 light-years away.

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

Всередині контейнера панелі вмісту є ще один контейнер, що містить в собі всі ці панелі (це необхідно для їх правильного відображення), і самі панелі вмісту. Кожна панель містить зображення і діапазон, його описує.

Основні зображення додаються документ як належні HTML-зображення, що використовують елемент Куленепробивний оглядач, — тому що вони є вмістом і повинні бути видимі допоміжними технологіями або користувачами, які не мають можливості користуватися як сценаріями, так і CSS, або чим-небудь іншим. Навігації також містять зображення, але так як вони не класифікуються як вміст, їм немає необхідності бути видимими у всіх випадках і, таким чином, і вони можуть бути додані за допомогою CSS, як додаткові імена класів в елементи

  • .

Зараз сторінка повинна виглядати таким чином:

Куленепробивний оглядач

Виглядає поки не дуже прекрасно, але документ працює правильно і елементи чітко видно і ними можна користуватися.

Запускаємо перегляд з допомогою 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 дійсно необхідний для роботи браузера вмісту. Якщо ви зараз подивитеся на сторінку, то побачите, що можна натиснути на будь-який з ескізів і на панелі перегляду буде показано відповідне повнорозмірне зображення:

Куленепробивний оглядач

Це дуже добре, так як все залишається функціональним і доступним, навіть не покладаючись на 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 «Trebuchet MS»; margin:0; width:90%; height:45px; padding:5px 5% 10px; background-color:#000; }

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

Куленепробивний оглядач

Переміщення окремих панелей вмісту вліво і встановлення розміру контейнера slider не так вже строго необхідна, однак без цих налаштувань всі зображення просто вишикуються по вертикалі. Це означає, що будь-які ефекти анімації, які ми додамо, будуть рухати панелі вмісту по вертикалі, а ми хотіли б їх анімувати горизонтально.

Тут я повинен уточнити, що цей код поки не працює в Opera; з деяких причин Opera не може використовувати якоря на сторінці для показу різних панелей вмісту при натисканні на один з елементів навігації. Цей серйозний збій представляється проблемою в багатьох версіях Opera. Мабуть, його можна виправити, і ті, хто використовує Opera в якості свого основного браузера, сподіваюся, вже придумали, як все полагодити. Хоча це не проблема, коли включений JavaScript.

Додаємо ефекти jQuery

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

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»).click(function(e){
//stop default browser
e.preventDefault();
//remove on states for all links nav
$(«#nav»).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 включає семантичну розмітку з відправної точки, але також включає і презентаційну розмітку, такі теги як і , а також семантично нейтральні теги, такі як span й div.

Завантажити вихідні коди zip-архівом

Перегляд Demo

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