Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 04.07.2006 11:00

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

Обсуждение темы Компактный список.
Любые замечания и вопросы можно (и нужно) высказывать здесь...

Нет на форуме

 

#2 19.07.2006 14:23

mdi
Разбирающийся
Зарегистрирован: 15.06.2006
Сообщений: 84

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

Когда запустил исправленный список в IE5 и FF, то получил всего одну иконку "плюс" справа от "пункт 1" ...??? Все остальное осталось без изменений: список как был открывшимся, так и остался ....

Нет на форуме

 

#3 21.08.2006 15:27

Konstantin
Новичок
Зарегистрирован: 21.08.2006
Сообщений: 1

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

Отличная работа! У меня есть несколько соображений по поводу наворотить скрипт:) В код я не смотрел...

1. Интересной возможностью была бы опция - приоткритая ветвь.. То есть, если указать одну или несколько ветвей то они будут отображаться открытыми (в нынешнем варианте по умолчанию список представлен только родительскими элементами).

1.1 Если пойти дальше то можно добавить еще и опцию - приоткрытая ветвь должна отобразится с всеми имеющимися детками, либо должны появится детки +1 level-a...

2. По умолчанию вся иерархия элементов открыта (сейчас наооборот все элементы кроме основных родительских спрятанный)

3. Открыть/закрыть все элементы ( функции-методы позволяющие открыть-закрыть все древо)

4. При открытии одной ветки если имелась другая приоткрытая ветка - закрывать ее (это относится только к главным элементам иерархии), данная возможность опциональна, ее можно использовать, а можно и нет.

5. Сделать удобную систему скинов для меню которая позволит менять внешний вид меню (это как я понимаю сделать будет легко так как мы имеем простои список)

Отредактированно Konstantin (21.08.2006 15:42)

Нет на форуме

 

#4 21.08.2006 16:43

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

Konstantin
Интересные предложения. Если у Вас есть время реализовать эти замыслы, то готов дополнить уже имеющееся описание сценария, если возникнут вопросы. Хотя, как Вы заметили, это простой список, и в работе с ним не должно возникнуть трудностей...

Нет на форуме

 

#5 17.09.2006 01:36

robert
Новичок
Откуда: Уфа
Зарегистрирован: 21.01.2006
Сообщений: 20
Вебсайт

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

Если не очень трудно, подскажите как перенести изображения "плюсы", "минусы" не в конец строчки, а в начало?

Еще вопрос - где (попроще) почитать о работе с DOM и javascript? Алгоритм вроде понятен, но не понятно как описАть служебными функциями (методами).. Еще бы на русском языке smile

И ещё smile - как лучше отлаживать такие скрипты??

Отредактированно robert (17.09.2006 01:50)


Роберт
Веб-дизайн: www.vinte.ru
Авторская песня: www.ksp.bashnet.ru

Нет на форуме

 

#6 17.09.2006 09:42

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

robert
В начало перенести "плюсы" можно так - в объекте createCompactList.prototype.expandUtil в методе setOpeners заменить в строке:

Код:

aListItems[i].insertBefore(this.openers[k], oList);

oList на aListItems[i].getElementsByTagName("a")[0].
Но тут возникнет небольшая проблема (увидите сами). Именно поэтому я не стал связываться с дополнительным форматированием, а сделал так, как есть. Пусть может быть не стандартно, но почему должно быть обязательно, как у всех?..

где (попроще) почитать о работе с DOM и javascript?

На мой взгляд информации полно, даже не знаю, что тут посоветовать (разве что воспользоваться любым удобным поисковиком). wink
А насчет отладки - это смотря что отлаживать...

Нет на форуме

 

#7 17.09.2006 10:38

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

Вот так будет проще:

Код:

aListItems[i].insertBefore(this.openers[k], aListItems[i].firstChild);

Нет на форуме

 

#8 17.09.2006 12:27

robert
Новичок
Откуда: Уфа
Зарегистрирован: 21.01.2006
Сообщений: 20
Вебсайт

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

Я воспользовался поисковиком smile

Нашел сайт www.dhtml.ru - есть справочник DOM на русском

Document Object Model (DOM) Level 2 Core Specification
http://www.w3.org/TR/2000/REC-DOM-Level … -20001113/

JavaTM 2 Platform, Standard Edition, v 1.4.2
API Specification
http://java.sun.com/j2se/1.4.2/docs/api … mmary.html


Но это всё справочники. каких-то реальных советов с конкретными примерами почти нет.

Возможно, есть книги, где более понятно описаны функции (с примерами) - поищу..

Самое полезное было почитать раздел DOM на этом сайте smile

Спасибо за ответ - буду разбираться.


Роберт
Веб-дизайн: www.vinte.ru
Авторская песня: www.ksp.bashnet.ru

Нет на форуме

 

#9 10.01.2007 08:43

mmp
Новичок
Зарегистрирован: 10.01.2007
Сообщений: 11
Вебсайт

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

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

примерно так:

Код:

<ul>
    <li>something1</li>
    <li>something2</li>
    <li>something3</li>
    <li onclick="document.getElementById('s4').style.display=(document.getElementById('s4').style.display=='none')?'block':'none'">
something4sublist
        <ul id="s4" style="display: none;">
            <li>something41</li>
            <li>something42</li>
            <li>something43</li>
            <li>something44</li>
        </ul>
    </li>
    <li>something5</li>
    <li>something6</li>
</ul>

Нет на форуме

 

#10 10.01.2007 20:58

runcore
Новичок
Зарегистрирован: 10.01.2007
Сообщений: 1

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

Здравствуйте.
Начал использовать ваш список в реальном проекте, и столкнулся с рядом проблем, которые не смог решить самостоятельно пока. ) например:
1) если углубиться в меню и потом нажать на ссылку. то страница перегружается и список отображается опять свернутым, ну оно и понятно. Вопрос. как бы его опять раскрыть. Пытался эмулировать клики соответствующие клики на списке, чтобы он опять автоматом раскрылся но не получилось. вызывал функцию onClick(),  но не понял что туда передавать. ведь идентификаторы для LI и UL там нигде не фигурируют.
2) еще заметил что при переходе по страницам список сначала показывается развернутым (не обработанным еще), а потом уже при OnLoad страницы срабатывает функция которая приводит его рабочее состояние. некрасиво. но это победилось тем что вызов обработчика списка делаю сразу после того как он сгенерировался. не жду пока загрузится вся страница. )

В общем меня интересует ответ первому пункту. может подкините идею, как это можно реализовать.
спасибо.

Нет на форуме

 

#11 10.01.2007 22:44

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

mmp
Вы что, издеваетесь? Это тот же функционал, что и в обсуждаемом примере? Я столько времени потратил, чтобы разобраться, как сделать появление каждого пункта скрытого списка поочередно, а Вы тут "display = 'none' || 'block'. Да-а-а...
runcore
Я ведь там не случайно написал, что "сценарий написан в академических целях". Т.е. для использования требуется серьезная доработка.
По 2-у вопросу могу сразу сказать - для того, чтобы список был изначально "свернутым", в стилях укажите:

Код:

 .menu ul li ul li {
    display:none;
}

По первому вопросу - сложнее.  С данным сценарием пока не знаю, а вообще делал следующим образом. Среди всех ссылок списка ищется та, чей адрес совпадает с адресом текущей страницы. Далее ищется родительский элемент списка, в котором она находится, и на элементе, отвечающем за открытие этой "ветки" эмулируется клик путем создания пользовательского объекта Event и методов fireEvent/dispatchEvent.

Нет на форуме

 

#12 11.01.2007 08:58

mmp
Новичок
Зарегистрирован: 10.01.2007
Сообщений: 11
Вебсайт

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

Я же написал ПРИМЕРНО ТАК!
Я времени много не тратил, написал сходу.
Но если Вы так реагируете, пожалуйста, вот:

Код:

<html>
<head>
    <script type="text/javascript"><!--
    var tmpid,am,let,count;
    
      function tree(letter, amount)
      {
                count=1;
                                am=amount;
                let=letter;
                show2();
      }
      
         function show2()
        {
            if(count<am) 
            {
                tmpid = '' + let + count;
                setTimeout('show(tmpid, 1)', 100);
                count++;
            }
            else if(count==am)
            {
                tmpid = '' + let + count;
                setTimeout('show(tmpid, 0)', 100);
            }
        }
        
      function show(id, flag)
        {
            var el = document.getElementById(id);            
            el.style.display = (el.style.display == 'block')?'none':'block';            
            if(flag!=0) show2();             
        }
        
    --></script>
</head>
<body>

<ul>
    <li>something1</li>
    <li>something2</li>
    <li>something3</li>
    <li><a onclick="tree('s', 3)">something4sublist</a>
        <ul>
            <li id="s1" style="display: none;">something41</li>
            <li id="s2" style="display: none;">something42</li>
            <li id="s3" style="display: none;">something43</li>
        </ul>
    </li>
    <li>something5</li>
</ul>

</body>
</html>

писал минут 20.
Ваш скрипт, конечно, хорош, но только в академических целях -
неоправданно сложно (мое личное мнение).

Нет на форуме

 

#13 11.01.2007 09:44

mmp
Новичок
Зарегистрирован: 10.01.2007
Сообщений: 11
Вебсайт

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

runcore
соображения по пункту 1)

"Пытался эмулировать клики.. - зачем так сложно то???

"Среди всех ссылок списка ищется та, чей адрес совпадает с адресом текущей страницы..."
тогда открытым будет только подменю этой страницы, а если до перехода были раскрыты и другие?

мое мнение:
нужно добавить глобальную переменную (массив || строку), в которую при раскрытии
каждого подменю дописывать этот факт (при закрытии, соответственно, убирать),
а при переходе по ссылке добавлять эту переменную в url
и при загрузке следующей страницы открывать нужные подменюхи

Отредактированно mmp (11.01.2007 09:50)

Нет на форуме

 

#14 11.01.2007 17:10

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

mmp

Я же написал ПРИМЕРНО ТАК!

Нет, сначала была реплика: "весь скрипт - одна строчка".

если Вы так реагируете

А что, адекватная реакция. То, что все можно "уместить" в одну строчку - это ведь неправда, Вы это сами доказали...

Нет на форуме

 

#15 11.01.2007 19:54

mmp
Новичок
Зарегистрирован: 10.01.2007
Сообщений: 11
Вебсайт

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

В первом варианте скрипт действительно был "одна строчка":

Код:

 document.getElementById('s4').style.display=(document.getElementById('s4').style.display=='none')?'block':'none'

остальное html, не правда ли?
Вообще замечание не по существу. Придираетесь к словам хотя сами не очень-то логичны:

"Это тот же функционал, что и в обсуждаемом примере? Я столько времени потратил, чтобы разобраться, как сделать появление каждого пункта скрытого списка поочередно..."

По Вашему поочередное появление пунктов списка - это ФУНКЦИОНАЛ? Мне кажется, что это оформление.
А по функционалу мой "однострочный" скрипт ничем не уступает Вашему "академическому". А уж насколько проще!

И все-таки я бы хотел услышать Ваше мнение по поводу второго варианта, согласитесь, он в сто раз проще,
да и пункты поочередно появляются.

Нет на форуме

 

#16 11.01.2007 20:37

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

Я вообще не пойму - Вам от меня чего нужно? Хотите - считайте, что "весь скрипт - одна строчка", но не требуйте от меня какого-то согласия...

Нет на форуме

 

#17 11.10.2007 17:07

guvatara
Новичок
Зарегистрирован: 11.10.2007
Сообщений: 2

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

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


mmp написал:

Я же написал ПРИМЕРНО ТАК!
Я времени много не тратил, написал сходу.
писал минут 20.
Ваш скрипт, конечно, хорош, но только в академических целях -
неоправданно сложно (мое личное мнение).

Ну относительно вашего скрипта могу сказать одно. Есть пользователи которые отключают исполнение жаба скриптов и тогда им будет не доступно содержание вложенного меню. Так что тот академический куда более универсальный, чем ваш.

Отредактированно guvatara (11.10.2007 17:28)

Нет на форуме

 

#18 13.10.2007 21:14

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

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

guvatara написал:

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

Это сделать довольно просто. В функции listInitializer найдите строку:

Код:

                    this.addHandler(openerNode, 'click',
                               newObj.onClickHandler
                                     .adapt(newObj, true));

, скопируйте ее, вставьте копию следом за ней и заментте openerNode на currItem.firstChild. В результате должно получиться:

Код:

                    this.addHandler(openerNode, 'click',
                               newObj.onClickHandler
                                     .adapt(newObj, true));
                    this.addHandler(currItem.firstChild, 'click',
                               newObj.onClickHandler
                                     .adapt(newObj, true));

Вот так должно получиться то, что Вам нужно.

Нет на форуме

 

#19 22.02.2008 15:03

DuC
Новичок
Зарегистрирован: 22.02.2008
Сообщений: 1

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

Я же написал ПРИМЕРНО ТАК!
Я времени много не тратил, написал сходу.
Но если Вы так реагируете, пожалуйста, вот:

Код:

Код:

<html>
<head>
    <script type="text/javascript"><!--
    var tmpid,am,let,count;
    
      function tree(letter, amount)
      {
                count=1;
                                am=amount;
                let=letter;
                show2();
      }
      
         function show2()
        {
            if(count<am) 
            {
                tmpid = '' + let + count;
                setTimeout('show(tmpid, 1)', 100);
                count++;
            }
            else if(count==am)
            {
                tmpid = '' + let + count;
                setTimeout('show(tmpid, 0)', 100);
            }
        }
        
      function show(id, flag)
        {
            var el = document.getElementById(id);            
            el.style.display = (el.style.display == 'block')?'none':'block';            
            if(flag!=0) show2();             
        }
        
    --></script>
</head>
<body>

<ul>
    <li>something1</li>
    <li>something2</li>
    <li>something3</li>
    <li><a onclick="tree('s', 3)">something4sublist</a>
        <ul>
            <li id="s1" style="display: none;">something41</li>
            <li id="s2" style="display: none;">something42</li>
            <li id="s3" style="display: none;">something43</li>
        </ul>
    </li>
    <li>something5</li>
</ul>

</body>
</html>

писал минут 20.
Ваш скрипт, конечно, хорош, но только в академических целях -
неоправданно сложно (мое личное мнение).

а как в этои коде сделать так чтобы были картинки +/-?

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson