Html 5 інтерактивні елементи

Відео: HTML5 №2 Моделі контенту

В HTML 5 з`явилися кілька різних інтерактивних елементів, які дозволяють змінювати сторінку без її перезавантаження, що дуже корисно для створення динамічних сайтів.

Ось список інтерактивних елементів з`явилися в HTML 5:

1) menu.

2) command.

3) datagrid.

4) details.

елемент menu в HTML 5 є досить цікавим, в тому плані, що він був ще в більш старих версіях мови HTML, але потім був визнаний застарілим, і ось в HTML 5 він несподівано повернувся знову.

елемент menu містить елементи command (Подібно до списку і його елементів), кожний з яких здатний запускати певну дію.

Відео: Edge Animate уроки: створення html5 банера. запис вебінару

 




 
 
 
 
onclick="alert(`Перша команда`)"label="Перша команда"/ Gt; 
onclick="alert(`Друга команда`)"label="Друга команда"/ Gt;

Відповідно, атрибут label відповідає за заголовок команди, а атрибут onclick обробляє подія "клік миші". Тут при натисненні, наприклад, по мітці"перша команда"Вискочить вікно, в якому буде написано:"перша команда". Завдяки елементам menu і command можна легко робити різні панелі інструментів, цікаву навігацію по сайту тощо.

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

 




 
 
 
 
 
 
ім`я 
Прізвище 
Зарплата 
 
 
Василь 
Васильєв 
15000 
 
 
Іван 
Іванов 
20000

Також замість таблиці дочірнім елементом datagrid може бути, наприклад, елемент select. Головний сенс цього елемента, що створюється масив з даними з дочірніх елементів, і це може бути або таблиця, або навіть звичайний список.

елемент details використовується для вказівки інформації, яка не є обов`язковою до показу. Різні браузери по-різному будуть обробляти даний елемент. Наприклад, який-небудь браузер зробить просто виноску, а інший браузер зробить підказку. Приклад використання елементу details нижче:

 




 
 
 
  
 Основне оповідання Деталі ...

От і все нововведення в HTML 5 щодо інтерактивних елементів.

Поділися в соціальних мережах:

Схожі