Javascript.RU

Элемент управления Tree View Control с помощью только HTML5

Элемент управления "дерево" очень удобно использовать для показа на сайте каталога статей, меню сайта, групп пользователей и т.п. Но стандартной реализации такого элемента средствами HTML, как скажем списка, нет. На практике ранее такой элемент управления реализовывался с помощью JavaScript и CSS3. Вполне понятно, что это связано с дополнительным утомительным кодированием. С появлением стандарта HTML5 ситуация не изменилась, но мне пришла простая идея использовать для этих целей тег . Правда вот беда его поддерживают сейчас только Chrom и Safari, но это дело времени.
Конечно предложенный этим методом элемент управления показывает довольно простое дерево, но зато это все делается очень просто да и выглядит довольно прилично. Короче говоря я это использую уже на практике.
Собственно говоря берем тег подписываем его другим тегом и делаем их вложенными при необходимости. Вот пример кода:

1. Node

1.1 Item
1.2 Item

1.3 Node

1.3.1 Item
1.3.2 Item

2. Node

2.1 Item
2.2 Item

3. Node

3.1 Item

Вот рабочий пример (напоминаю, что работает в Chrom'е или Safari) на моем сайте http://www.catalogofsoftware.com/
Здесь строится дерево из платформ, категорий и подкатегорий.

В конце несколько интересных ссылок:
HTML5 tag ;
http://www.w3schools.com/tags/tag_details.asp
How to change appearance;
http://html5doctor.com/the-details-and-summary-elements/
How to create Tree View Control by CSS3 only.
http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/

-1

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
5 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
PATHNK
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum