Рецепти html5 занурюємося в кодинг під html5 на конкретних прикладах
Що таке HTML5?
Капелька історії
Корисні рецепти
Говорити про теорію HTML5 можна дуже довго, але рубрика у нас називається «Кодінг», тому я пропоную тобі відчути можливості стандарту на практиці. Я не став заморочуватися над створенням надоригінального рецептів, а вирішив навести приклади речей, які дійсно корисні і які вже зараз можна і потрібно застосовувати на своїх сайтах. Отже, поїхали.
Рецепт №1: Включаємо Drag # 038; Drop на повну
Однією з приємних няшек (напевно, даремно ти вжив стільки енергетиків, адже тут має бути слово «фішок» - прим. Ред.) HTML5 стала можливість застосування File API і Drag and Drop API.
З їх допомогою можна організувати красиву передачу файлів з комп'ютера користувача на сервер. Пам'ятаєш, раніше для відправки файлів завжди було поле з кнопочкою «Browse»? Після її натискання з'являвся стандартний діалог вибору файлів, в якому і було потрібно вибрати файл для передачі. Назвати цей спосіб зручним язик не повертається. Особливо якщо мова йде про додавання в чергу завантаження декількох файлів.
Трохи пізніше умільці почали ліпити Аплоадерів на флеш, які надавали більший функціонал, але мали серйозний недо статок - потреба в установленому флеш. Крім того, в обох випадках у користувача не було можливості додавати файли для передачі шляхом простого перетягування мишкою на сторінку.
А адже технологія Drag # 038; Drop застосовується в системі часто-густо. Мені особисто завжди хотілося просто виділити потрібні файли і легким помахом щури кинути на сторінку. Це куди зручніше, ніж нишпорити в пошуках файлу за допомогою стандартного діалогу.
HTML5 вніс свої корективи, і тепер ніщо не заважає організувати повноцінний Drag # 038; Drop для передачі файлу на сторінку. Першими цю фічу реалізували гугловчане в Gmail. Якщо ти користуєшся гмилом, то напевно давно помітив область, на яку можна перетягнути файли для пріаттачіванія до листа. Особисто я активно користуюся цією функцією і зараз покажу тобі, як замутити таку ж для свого проекту. Наш проект буде складатися з трьох файлів: sample.html, style.css і scripts.js. Ми, звичайно, могли б обмежитися і одним html-файлом, але тоді код вийшов би нечитабельним. Не треба заважати HTML з JS або CSS. Краще все розбити по файлах, і потім вони спокійнісінько з ними працювати. Насамперед підготуємо структуру нашого застосування. Створюй файл sample.html і напиши на ньому:
#box width: 500px;
height: 300px;
border: 2px dashed # 000000;
background-color: # FCFFB2;
text-align: center;
color: # 3D91FF;
font-size: 2em;
font-family: Verdana, sans-serif;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
>
#label position: relative;
top: 2%;
>
Ідентифікатор «box» - це і є наш майбутній контейнер для прийому файлів (на цю область користувач повинен перетягувати документи). Щоб користувач не промахнувся, я роблю область побільше і як варіант обрамлення вибираю dashed - пунктирні лінії. Звичайні пунктирні лінії виглядають не дуже, тому я відразу задаю значення для властивостей: -moz-border-radius і -webkitborderradius. Ось зараз ти можеш відкрити створену сторінку в браузері і оцінити загальний вид.
// Додаємо обробники подій
var mybox = document.getElementById ( "box")
mybox.addEventListener ( "dragenter", dragEnter, false);
mybox.addEventListener ( "dragexit", dragExit, false);
mybox.addEventListener ( "dragover", dragOver, false);
mybox.addEventListener ( "drop", drop, false);
>);
function dragEnter (evt)
evt.preventDefault ();
>
function dragExit (evt)
evt.preventDefault ();
>
function dragOver (evt)