О сайте | Обратная связь | Памятка для вебмастера
[ Регистрация · Войти · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 2 из 2«12
Модератор форума: KorniloFF 
Форум » Создание сайта » JAVA-Scripts » многоуровневый список (поправить скрипт или страницу?)
многоуровневый список
KorniloFF Дата: Понедельник, 02.04.2012, 23:02 | Сообщение # 11
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Quote (Гром)
Это к Корнилову

А для меня нужно подробнее расписать, тогда мож сделаю! :D
alek30 Дата: Среда, 04.04.2012, 04:56 | Сообщение # 12
Выпускной класс
Награды: 1
Группа: Проверенные
Сообщений: 111
Город: Ангарск
Репутация: 8
Статус: Offline
KorniloFF, я попытался объяснить в коде что я хочу сделать (при нажатии на кнопку раскрываются все уровни и под уровни списка, вот так: )

Code
<html>
   <head>
   <title> Многоуровневый раскрывающийся список </title>
   <style type="text/css">
   <!--
           .colelem {position: relative; display: none;}
           .expelem {position: relative; display: block;}
           .exeexe {position: relative; cursor:pointer; color:red; }
           #head1 {width:300px; background:gold;}
   -->
   </style>
   <script type="text/javascript">
   <!--
           var zakr='';
           var zzakk='';
                  function Tree(Event) {
                    if (window.event) zzakk=event.srcElement;
                    else zzakk=Event.target;
                    zakr=zzakk.className;
                    if (zakr=="exelem") Rackr(1,(zzakk.childNodes.length-1));
                    else if (zakr=="exeexe") Rackr(0,(zzakk.childNodes.length-1));
            }

                 function Rackr(pos,kol) {
              if (kol>0) {
                  if (zzakk.childNodes[kol].className=="colelem") {
                     if (zzakk.childNodes[kol].childNodes.length!=1) zzakk.childNodes[kol].style.color="red";
                     else zzakk.childNodes[kol].style.color="black";
                     zzakk.childNodes[kol].className="exelem";
                     zzakk.childNodes[kol].style.position="absolute";
                   if (pos==0)
                   zzakk.childNodes[kol].style.left=parseInt(document.getElementById("head1").style.left)+5+"px";
                   else if (pos!=0)
                   zzakk.childNodes[kol].style.left=parseInt(zzakk.style.left)+5+"px";
                   zzakk.childNodes[kol].style.position="relative";
                  }
                  else
                   if (zzakk.childNodes[kol].className) {
                       zzakk.childNodes[kol].style.color="black";
                       zzakk.childNodes[kol].className="colelem";
                   }
                   setTimeout("Rackr("+pos+","+(kol-1)+")",50);
              }
            }
   //-->
   </script>
   </head>

   <body onClick="Tree(event)">
<div align="center">
<div>
<a onclick="??"><img src="http://otlichnica.com/_pu/32/15700059.png" alt="кнопка для развёртывания вcего списка"></a></div>
   <div id="head1" style="position:relative;left:5px;">

           <div style="text-align:left;" class="exeexe" id="a1">1
                   <div class="colelem" id="a2">1.1
                           <div class="colelem" id="a3">1.1.1</div>
                           <div class="colelem" id="a4">1.1.2
                      <div class="colelem" id="a5">1.1.2.1</div>
                      <div class="colelem" id="a6">1.1.2.2</div>
                           </div>
                           <div class="colelem" id="a7">1.1.3</div>
                   </div>
                   <div class="colelem" id="a8">1.2</div>
                   <div class="colelem" id="a9">1.3</div>
                   <div class="colelem" id="a10">1.4
                           <div class="colelem" id="a11">1.4.1</div>
                           <div class="colelem" id="a12">1.4.2</div>
                   </div>
           </div> </div>
   </div>
   </body>
   </html>
Прикрепления: 0081500.jpg(9Kb)
KorniloFF Дата: Среда, 04.04.2012, 08:22 | Сообщение # 13
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
alek30, решение:
Code

<html>
    <head>
    <title> Многоуровневый раскрывающийся список </title>
    <style type="text/css">
    <!--
            .colelem {position: relative; display: none;}
            .expelem {position: relative; display: block;}
            .exeexe {position: relative; cursor:pointer; color:red; }
            #head1 {width:300px; background:gold;}
    -->
    </style>
    <script type="text/javascript">
    <!--
            var zakr='';
            var zzakk='';
                   function Tree(Event) {
                     if (window.event) zzakk=event.srcElement;
                     else zzakk=Event.target;
                     zakr=zzakk.className;
                     if (zakr=="exelem") Rackr(1,(zzakk.childNodes.length-1));
                     else if (zakr=="exeexe") Rackr(0,(zzakk.childNodes.length-1));
             }

                  function Rackr(pos,kol) {
               if (kol>0) {
                   if (zzakk.childNodes[kol].className=="colelem") {
                      if (zzakk.childNodes[kol].childNodes.length!=1) zzakk.childNodes[kol].style.color="red";
                      else zzakk.childNodes[kol].style.color="black";
                      zzakk.childNodes[kol].className="exelem";
                      zzakk.childNodes[kol].style.position="absolute";
                    if (pos==0)
                    zzakk.childNodes[kol].style.left=parseInt(document.getElementById("head1").style.left)+5+"px";
                    else if (pos!=0)
                    zzakk.childNodes[kol].style.left=parseInt(zzakk.style.left)+5+"px";
                    zzakk.childNodes[kol].style.position="relative";
                   }
                   else
                    if (zzakk.childNodes[kol].className) {
                        zzakk.childNodes[kol].style.color="black";
                        zzakk.childNodes[kol].className="colelem";
                    }
                    setTimeout("Rackr("+pos+","+(kol-1)+")",50);
               }
             }
    function rask_all()  
    {
     sub= document.getElementById('head1').getElementsByClassName('colelem')
     for (i=0; i < sub.length; i++)  
       { sub[i].style.display= 'block'
       };
    }
    //-->
    </script>
    </head>

    <body onload="Tree(event)">
<div align="center">
<div>
<a onclick="rask_all()"><img src="http://otlichnica.com/_pu/32/15700059.png" alt="кнопка для развёртывания вcего списка"></a></div>
    <div id="head1" style="position:relative;left:5px;">

            <div style="text-align:left;" class="exeexe" id="a1">1
                    <div class="colelem" id="a2">1.1
                            <div class="colelem" id="a3">1.1.1</div>
                            <div class="colelem" id="a4">1.1.2
                       <div class="colelem" id="a5">1.1.2.1</div>
                       <div class="colelem" id="a6">1.1.2.2</div>
                            </div>
                            <div class="colelem" id="a7">1.1.3</div>
                    </div>
                    <div class="colelem" id="a8">1.2</div>
                    <div class="colelem" id="a9">1.3</div>
                    <div class="colelem" id="a10">1.4
                            <div class="colelem" id="a11">1.4.1</div>
                            <div class="colelem" id="a12">1.4.2</div>
                    </div>
            </div> </div>
    </div>
    </body>
    </html>




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
alek30 Дата: Среда, 04.04.2012, 16:35 | Сообщение # 14
Выпускной класс
Награды: 1
Группа: Проверенные
Сообщений: 111
Город: Ангарск
Репутация: 8
Статус: Offline
KorniloFF, что-то не работает и ещё при анализе изменённого скрипта на сколько я понял, что получится список с пунктами первого уровня и кнопкой для раскрытия всего списка сразу? А надо чтоб пользователь мог пройти по интересующему пункту и подпунктам (как и есть в первоначальном варианте), а кнопкой он воспользовался для того чтоб увидеть все пункты с подпунктами полностью раскрытыми (наверно получается, что нужна функция, которая будет выполнять все действия скрипта одновременно управляемая одним нажатием на кнопку или блокирующая скрипт). ;) надеюсь не слишком нудное объяснение

Сообщение отредактировал alek30 - Среда, 04.04.2012, 17:20
Гром Дата: Среда, 04.04.2012, 18:14 | Сообщение # 15
Профессор(ша)
Награды: 11
Сообщений: 3350
Город: Астрахань
Репутация: 96
Статус: Offline
Мда......Запросы для бесплатной помощи слегка зашкаливают ;)

Профессиональный подход к созданию сайтов под ключ.
Все услуги в одном месте.
Домен второго уровня и хостинг на год в подарок!
KorniloFF Дата: Среда, 04.04.2012, 21:22 | Сообщение # 16
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Quote (alek30)
KorniloFF, что-то не работает

Все работает, я проверял.
Вот пример




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
alek30 Дата: Пятница, 06.04.2012, 06:13 | Сообщение # 17
Выпускной класс
Награды: 1
Группа: Проверенные
Сообщений: 111
Город: Ангарск
Репутация: 8
Статус: Offline
Гром, это не запрос, просто попытка подробно описать (да, сложен для понимания или слишком подробно описал, перестарался :) )
KorniloFF, в примере работает,
Quote (alek30)
А надо ещё чтоб пользователь мог пройти по интересующему пункту и подпунктам
KorniloFF Дата: Пятница, 06.04.2012, 07:56 | Сообщение # 18
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
alek30, в примере стоит тот же код, можешь посмотреть исходник броузером.
В личке ответил.




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Форум » Создание сайта » JAVA-Scripts » многоуровневый список (поправить скрипт или страницу?)
Страница 2 из 2«12
Поиск:
многоуровневый список (2) - Создание сайта - JAVA-Scripts - Форум
Сегодня были на форуме:
oksanachyumakova, lexuss18, marina785f, mary189, anatoliekruglov, ermolovaanastasia6, livshithjan, a_doleva, vasilievart81

Конструктор кнопок он-лайн


Получить код CSS

Подбор цветов

Справочник по html и CSS

Наши копирайтеры

Поиск