Компактный список

Любой громоздкий многоуровневый список можно представить в компактном виде. В форуме недавно обсуждалась тема "Закрытие всех слоев DIV, составляющих меню". После него AKS прислал простое решение, которое будет показано далее на примере неупорядоченного списка UL, его можно применить для создания меню сайта.

Eсли в браузере отключить JavaScript, будет просто показан развернутый список, т.е. все его элементы всегда доступны, не зависимо от возможности выполнять JavaScript.

Что нового?

  1. Сценарий запускается до события load объекта window. Подробности можно посмотреть здесь: "Проблема window.onload() и ее решение". Это сделано для того, чтобы скрыть дополнительные пункты списка еще до их появления. Но при этом сценарий должен быть загружен до загрузки страницы, т.е. должен быть расположен в теге head. Там же должен располагаться вызов конструктора.
  2. Открыть или закрыть дополнительный список теперь можно не дожидаясь его полного открытия или закрытия.
  3. Добавлена возможность выбора варианта появления и скрытия пунктов списка: может начинаться с первого или с последнего пункта.
  4. "Открывашки" (изображения, например, с плюсом и минусом, или текстовые элементы) теперь размещены в тэгах <a>. Это позволяет осуществлять навигацию по списку как с мышью, так и без нее, обходясь клавиатурой.

Пример списка

Кликните по ссылке ниже, чтобы скрыть дополнительные пункты...

Подключить скрипт и свернуть список.

Посмотреть пример.

Исходный код класса AnimatedList.

Обсуждение примера в форуме: "Компактный список".

Автор: AKS

 

Этот пример с описанием его работы прислан автором для размещения на XHTML.ru. Подробнее...



Много комментариев (27) к “Компактный список”

  1. Vah :

    А какова лицензия для этого кода? GPL или MIT?


  2. AKS :

    Лицензии нет, т.к. сценарий написан в академических целях в тестовом варианте.
    Любой желающий может им пользоваться.
    Жду замечаний, предложений, которые можно оставить на форуме, а также обсудить все, что связано с этим сценарием.


  3. Wizard :

    С виду- просто замечательно.
    Я бы предложил свой вариант…
    Но зачем, если он менее удачный:)


  4. Eugenia :

    Всё бы хорошо, если бы не ошибка на странице в Инт.Экспл.


  5. AKS :

    Eugenia, а какая ошибка? Что же Вы сразу не пишите подробности?


  6. mmproject :

    а не проще для таких целей использовать свойство display?
    весь скрипт – одна строчка.


  7. AKS :

    mmproject, так давайте в форуме (выше есть ссылка) взглянем на “скрипт – одна строчка”. ;)


  8. mmproject :

    давайте


  9. 4g3n7 :

    Интересный скрипт, мне нравится…


  10. dark-demon :

    скрипт привязан к вёрстке и оформлению, что не есть гут. к тому же является монстроскриптом.

    в общем смотрите пример:

    <html>
    <head>
    <script>
    /*<!--<![CDATA[*/
    document.onclick= function(e)
    {
    var s= (e)?e.target:(event)?event.srcElement:"";
    if ((e?e:event).button>0) return;
    while (s)
    {
    if (s.className&&s.className.search(/\bbaken\b/)!=-1)
    {
    s= s.parentNode;
    while (s)
    {
    if (!s.className)
    {
    s= s.parentNode;
    continue;
    }
    var t= s.className.replace(/\boff\b/,"on");
    if (t==s.className) {t= s.className.replace(/\bon\b/,"off"); opened=false;};
    if (t==s.className)
    {
    s= s.parentNode;
    continue;
    }
    s.className= t;
    if (s.className.search(/\bonlyone\b/)!=-1) // закрывать ли соседние ветки
    {
    var e=s;
    while (e=e.nextSibling)
    {
    if (e.className) e.className= e.className.replace(/\bon\b/,"off");
    }
    var e=s;
    while (e=e.previousSibling)
    {
    if (e.className) e.className= e.className.replace(/\bon\b/,"off");
    }
    }
    break;
    }
    break;
    }
    s= s.parentNode;
    }
    }
    function initbakens()
    {
    var s= document.getElementsByTagName("*");
    for (var i=0; i<s.length; i++)
    {
    s[i].className= s[i].className.replace(/\bonoff\b/,"off");
    }
    }
    /*]]>-->*/
    </script>

    <style>
    /*<!--<![CDATA[*/

    .off dd {display: none;}
    .baken {cursor: pointer}

    /*]]>-->*/
    </style>

    </head>
    <body>

    <dl class="on">
    <dt class="baken">меню</dt>
    <dd class="on">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    <dd class="on">
    <dl>
    <dt class="baken">подменю</dt>
    <dd class="onoff onlyone">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    <dd class="onoff onlyone">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    <dd class="onoff onlyone">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    <dd class="onoff onlyone">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    </dl>
    </dd>
    <dd class="on">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    <dd class="on">
    <dl>
    <dt class="baken">подменю</dt>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    <dd>айтем</dd>
    </dl>
    </dd>
    </dl>

    <script>initbakens()</script>

    </body>
    </html>

    то есть в вёрстку достаточно добавить специальные классы и задать для них стилевые правила.
    baken – это элемент по щелчку по которому будет найден родительский элемент и его класс on будет заменён на off или наоборот.
    anlyone означает, что при раскрытии этой ветки нужно свернуть остальные того же уровня.
    основные идеи расписаны тут: http://dark-demon.nm.ru/web/now_how/expand_menu/
    правда там куча багов в реализации, да и скрипты устаревшие…


  11. dark-demon :

    ой, мля, вы не слышали про функцию htmlspecialchars? какой толк от тэга code, из него что-то вырезается???
    ладно, выкладываю исходники сюда: http://dark-demon.nm.ru/web/samples/testbaken.txt

    ps: да и что за маразм – пока набираю сообщение каптча устаревает :evil:


  12. Андрей :

    dark-demon, спасибо за интересный пример!


  13. rumano :

    Подскажите, пожалуйста. Как мне правильно позиционировать мои списки, так, чтобы если содержимое содержит 3 и более подсписка, не выравнивалась под следующий список, а прижималась ровно под предыдущий, т.е. чтобы не было вертикальных пробелов.

    Спасибо

    <style type=”text/css”>
    .listingdetails_caption
    {
    font-size:14px;
    font-weight:bold;
    list-style:none;
    width:33%;
    white-space:nowrap;
    margin-bottom:10px;
    float:left;
    display:inline;
    }
    .listingdetails_values
    {
    position:relative;
    padding-left:10px;
    font-size:11px;
    font-weight:normal;
    }
    </style>
    <ul>
    <li class=”listingdetails_caption”>Area Number
    <div class=”listingdetails_values”>San Benancio, Harper Canyon and</div>
    </li>
    <li class=”listingdetails_caption”>Bathroom Features
    <div class=”listingdetails_values”>Tub with Jets<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Bedroom Types
    <div class=”listingdetails_values”>1 Master Bedroom Suite<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Cross Street
    <div class=”listingdetails_values”>Hwy 68 </div>
    </li>
    <li class=”listingdetails_caption”>Family Room
    <div class=”listingdetails_values”>Family Room Kitchen<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Fireplace Description
    <div class=”listingdetails_values”>Gas Log Only Fireplace<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Fireplace Location
    <div class=”listingdetails_values”>In Master Bedroom<br/>
    In Other Location<br/>
    In Family Room<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Floor Covering
    <div class=”listingdetails_values”>Granite<br/>
    Wall to Wall Carpeting<br/>
    Partial Hardwood<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Formal Dining Room
    <div class=”listingdetails_values”>Living Rm/Dining Rm Combo<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Foundation
    <div class=”listingdetails_values”>Concrete Slab<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Has Fireplaces
    <div class=”listingdetails_values”>Fireplace<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Heating System
    <div class=”listingdetails_values”>Gas Heat<br/>
    Radiant Heat<br/>
    </div>
    </li>
    <li class=”listingdetails_caption”>Home Features
    <div class=”listingdetails_values”>1 Refrigerator<br/>
    Cooktop Range<br/>
    Disposal<br/>
    1 Dishwasher<br/>
    </div>
    </li>
    </ul>


  14. Строитель :

    Грамотный скрипт


  15. Guvatara :

    Супер скрипт, но есть вопросец, чтоб нужно добавить, что меню раскрывалось не только на нажатие плюсика, но и на нажатие ссылки.

    Просто моск уже не пашет.


  16. рулевой LoadingWeb.Ru :

    Что-то похожее у меня на сайте…

    только немного по другому… Проще как-то…)))


  17. AKS :

    >только немного по другому… Проще как-то…)))
    У-у-у! На-а-амного проще! )))))))))))))


  18. Ксения :

    Народ, такой вопросик, а реализовть изображение “+/-” можно только присоединяя картинку этих самых “-/+”, или это можно реализовать с помощью css?


  19. AKS :

    Ксения, конечно можно было бы реализовать смену изображений с помощью CSS. Для этого нужно немножечко переписать сценарий так, чтобы он мог манипулировать соответствующими классами стилей (в которых будет меняться значение list-style-image).


  20. Максим :

    Спасибо за пример, как раз встала задача создания на сайте карты сайта, думаю, что данная реализация – самое то.


  21. Pavel_Pronskiy :

    Велосипедостроительствомзанимаетесь товарищи!
    jQuery Treeview Plugin


  22. интернет бизнес :

    Зачет. давно искал дерево, но ника кне наткнулся на ничего подходящее.


  23. Ctox :

    скрипт надо где при наведении на сылку появлялось в опр. месте картинка ?


  24. Braiden :

    Комплекс Экзюпери: мы в ответе за тех, кого вовремя не послали.


  25. pgood :

    Мой вариант для примера 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


  26. pgood :

    (предидущий комент целиком не запостился, попробую повторить)
    Мой вариант для примера 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

    Вариант с кнопочками будет немного пообъемнее, но принцип остается тот же


  27. AndriX :

    Спасибо. Мне этот скрипт очень помог! Автору респект!



22 queries 0.209 seconds.