Элемент управления 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/
|
Конечно предложенный этим методом элемент управления показывает довольно простое дерево, но зато это все делается очень просто да и выглядит довольно прилично. Короче говоря я это использую уже на практике.
Собственно говоря берем тег подписываем его другим тегом и делаем их вложенными при необходимости. Вот пример кода: geometry dash
Ух ты, эта статья меняет правила игры! Я полностью разбираюсь в подходе HTML5, мне кажется, это будущее разработки пользовательского интерфейса. Напоминает мне тот случай, когда я полностью освоил сумасшедший уровень в Monkey Mart, чистая магия HTML5, понимаете? Серьезно, это вещь следующего уровня, и я полностью за. Спасибо за капельку знаний!