Компактный список
29.04.2023Любой громоздкий многоуровневый список можно представить в компактном виде. В форуме недавно обсуждалась тема "Закрытие всех слоев DIV, составляющих меню". После него AKS прислал простое решение, которое будет показано далее на примере неупорядоченного списка UL, его можно применить для создания меню сайта.
Eсли в браузере отключить JavaScript, будет просто показан развернутый список, т.е. все его элементы всегда доступны, не зависимо от возможности выполнять JavaScript.
Что нового?
- Сценарий запускается до события load объекта window. Подробности можно посмотреть здесь: "Проблема window.onload() и ее решение". Это сделано для того, чтобы скрыть дополнительные пункты списка еще до их появления. Но при этом сценарий должен быть загружен до загрузки страницы, т.е. должен быть расположен в теге head. Там же должен располагаться вызов конструктора.
- Открыть или закрыть дополнительный список теперь можно не дожидаясь его полного открытия или закрытия.
- Добавлена возможность выбора варианта появления и скрытия пунктов списка: может начинаться с первого или с последнего пункта.
- "Открывашки" (изображения, например, с плюсом и минусом, или текстовые элементы) теперь размещены в тэгах . Это позволяет осуществлять навигацию по списку как с мышью, так и без нее, обходясь клавиатурой.
Пример списка
Кликните по ссылке ниже, чтобы скрыть дополнительные пункты...
Подключить скрипт и свернуть список.
?сходный код класса AnimatedList.
Обсуждение примера в форуме: "Компактный список".
Автор: AKS
А какова лицензия для этого кода? GPL или MIT?
2006-06-30 at 2:48 pm
Лицензии нет, т.к. сценарий написан в академических целях в тестовом варианте.
Любой желающий может им пользоваться.
Жду замечаний, предложений, которые можно оставить на форуме, а также обсудить все, что связано с этим сценарием.
2006-06-30 at 4:52 pm
С виду- просто замечательно.
Я бы предложил свой вариант…
Но зачем, если он менее удачный:)
2006-06-30 at 5:06 pm
Всё бы хорошо, если бы не ошибка на странице в ?нт.Экспл.
2006-12-25 at 2:35 pm
Eugenia, а какая ошибка? Что же Вы сразу не пишите подробности?
2006-12-26 at 6:14 pm
а не проще для таких целей использовать свойство
display?весь скрипт – одна строчка.
2007-01-09 at 9:44 am
mmproject, так давайте в форуме (выше есть ссылка) взглянем на “скрипт – одна строчка”. ;)
2007-01-09 at 11:04 am
давайте
2007-01-10 at 9:44 am
?нтересный скрипт, мне нравится…
2007-02-11 at 7:57 pm
скрипт привязан к вёрстке и оформлению, что не есть гут. к тому же является монстроскриптом.
в общем смотрите пример:
.off dd {display: none;}
.baken {cursor: pointer}
/*]]>-->*/
то есть в вёрстку достаточно добавить специальные классы и задать для них стилевые правила.
baken – это элемент по щелчку по которому будет найден родительский элемент и его класс on будет заменён на off или наоборот.
anlyone означает, что при раскрытии этой ветки нужно свернуть остальные того же уровня.
основные идеи расписаны тут: http://dark-demon.nm.ru/web/now_how/expand_menu/
правда там куча багов в реализации, да и скрипты устаревшие…
2007-02-12 at 3:07 am
ой, мля, вы не слышали про функцию htmlspecialchars? какой толк от тэга code, из него что-то вырезается???
ладно, выкладываю исходники сюда: http://dark-demon.nm.ru/web/samples/testbaken.txt
ps: да и что за маразм – пока набираю сообщение каптча устаревает :evil:
2007-02-12 at 3:15 am
dark-demon, спасибо за интересный пример!
2007-03-11 at 3:36 am
Подскажите, пожалуйста. Как мне правильно позиционировать мои списки, так, чтобы если содержимое содержит 3 и более подсписка, не выравнивалась под следующий список, а прижималась ровно под предыдущий, т.е. чтобы не было вертикальных пробелов.
Спасибо
In Other Location
In Family Room
Wall to Wall Carpeting
Partial Hardwood
Radiant Heat
Cooktop Range
Disposal
1 Dishwasher
2007-09-05 at 7:50 pm
Грамотный скрипт
2007-09-14 at 11:12 am
Супер скрипт, но есть вопросец, чтоб нужно добавить, что меню раскрывалось не только на нажатие плюсика, но и на нажатие ссылки.
Просто моск уже не пашет.
2007-10-11 at 4:45 pm
Что-то похожее у меня на сайте…
только немного по другому… Проще как-то…)))
2007-10-17 at 8:38 am
>только немного по другому… Проще как-то…)))
У-у-у! На-а-амного проще! )))))))))))))
2007-10-17 at 7:44 pm
Народ, такой вопросик, а реализовть изображение “+/-” можно только присоединяя картинку этих самых “-/+”, или это можно реализовать с помощью css?
2007-10-30 at 12:38 pm
Ксения, конечно можно было бы реализовать смену изображений с помощью CSS. Для этого нужно немножечко переписать сценарий так, чтобы он мог манипулировать соответствующими классами стилей (в которых будет меняться значение list-style-image).
2007-10-30 at 11:37 pm
Спасибо за пример, как раз встала задача создания на сайте карты сайта, думаю, что данная реализация – самое то.
2007-11-10 at 1:25 pm
Велосипедостроительствомзанимаетесь товарищи!
jQuery Treeview Plugin
2007-11-14 at 11:23 am
Зачет. давно искал дерево, но ника кне наткнулся на ничего подходящее.
2007-12-11 at 10:11 am
скрипт надо где при наведении на сылку появлялось в опр. месте картинка ?
2007-12-17 at 1:51 pm
Комплекс Экзюпери: мы в ответе за тех, кого вовремя не послали.
2008-05-16 at 12:19 am
Мой вариант для примера dark-demon
1. Сначала стилями прячем подменю
dl dd dl dd{
display:none;
}
2. ?нициализируем меню следующей функцией, передав в качестве параметра id корневого элемента списка
function initDropMenu(id){
var dm=document.getElementById(id); /* корневой элемент списка */
var items=dm.getElementsByTagName(’dt’);
for(var i=0,length=items.length; i
2008-07-14 at 1:31 pm
(предидущий комент целиком не запостился, попробую повторить)
Мой вариант для примера dark-demon
1. Сначала стилями прячем подменю
dl dd dl dd{
display:none;
}
2. ?нициализируем меню следующей функцией, передав в качестве параметра id корневого элемента списка
function initDropMenu(id){
var dm=document.getElementById(id); /* корневой элемент списка */
var items=dm.getElementsByTagName('dt');
for(var i=0,length=items.length; i
Вариант с кнопочками будет немного пообъемнее, но принцип остается тот же
2008-07-14 at 1:34 pm
Спасибо. Мне этот скрипт очень помог! Автору респект!
2008-08-30 at 12:14 am