ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Древовидный раскрывающийся список

Древовидный раскрывающийся список

Для создания древовидного раскрывающегося списка воспользуемся элементом управления ActiveX TreeView. Элемент управления TreeView вставляется в HTML-код с помощью тега

<object id="myTreeView"
classid="clsid: C74190B6-8589-11D1-B16A-00C0F0283628">
</object
>

Если содержимое древовидного списка не помещается в область, заданную атрибутами width и height, то автоматически появляются полосы прокрутки. В тег <object> для элемента TreeView можно вставить теги <param>, определяющие дополнительные параметры. Их список можно узнать с помощью выражения alert(myTreeView.innerHTML). На внешний вид списка влияют следующие параметры:

<param name='LineStyle' value='число'>
<param name='Style' value='число'>
<param name='BorderStyle' value='число'>

Каждый узел иерархического списка представляется объектом Node. Множество всех узлов списка хранится в коллекции Nodes. Каждый узел может быть корневым(не иметь родителя), конечным(не иметь потомков) или промежуточным(иметь родителя и потомков). Корневых узлов может быть несколько, и тогда список состоит из нескольких древовидных списков.

Объект Node(узел) имеет ряд свойств, с помощью которых описывается местоположение узла в списке: parent(узел-родитель), child(первый потомок), children(количество потомков) и root(корень).

Древовидный список создается путем добавления узлов в коллекцию Nodes посредством метода Add, который имеет следующие параметры.

  • Первый параметр определяет объект, относительно которого создается новый узел. Это или индекс, или уникальный идентификатор существующего объекта. Если данный параметр не указан, то создается корневой узел.
  • Второй параметр определяет отношение к уже существующим узлам. Возможны следующие значения:
    • 0 – новый узел создается перед всеми узлами того же уровня, что и узел, определенный первым параметром;
    • 1 – новый узел создается после всех узлов того же уровня, что и узел определенный первым параметром;
    • 2 – новый узел создается после узла, определенного первым параметром;
    • 3 – новый узел создается перед узлом, определенным первым параметром;
    • 4 – новый узел создается как потомок узла, определенного первым параметром.
      • Третий параметр – идентификатор – строка символов; по идентификатору можно ссылаться на создаваемый узел.
      • Четвертый параметр – текст, отображаемый рядом с меткой узла(обязательный параметр).
      • Пятый параметр определяет изображение, соответствующее узлу.
      • Шестой параметр определяет изображение, соответствующее узлу, когда он выбран щелчком или с помощью навигационных клавиш.

      Только параметр, определяющий подписи узлов, является обязательным. Вместо пропускаемых параметров в вызове метода Add следует ставить null.

      Рассмотрим пример, в котором код HTML-документа, содержит элемент управления TreeView, а также плавающий фрейм(<iframe>). В сценарии формируется древовидный список и определены процедуры, обрабатывающие события, связанные со списком. В результате их выполнения список можно развернуть, свернуть и загрузить в плавающий фрейм HTML-документ. В этом примере загрузка будет производиться при щелчке мыши на концевом узле. При этом адрес загружаемого документа формируется из подписи концевого узла путем приписывания к ней точки и расширени файла html. Возможны и другие алгоритмы формирования URL-адреса отображаемого документа.

      В обработчике щелчка на элементах списка используется подобъект SelectedItem объекта TreeView, который содержит сведения о выделенном узле. Так, свойство Text содержит подпись выделенного узла, а children – количество дочерних узлов.

      <!DOCTYPE HTML>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Древовидный список</title>
      </head>

      <body>
      <DIV id=mydiv width=100 HEIGHT=300>
      <button id=bt>Оглавление показать</button><br>
      <OBJECT id='myTreeView' classid="clsid:C74190B6-8589-11D1-B16A-00C0F0283628"
      WIDTH=300 HEIGHT=300" STYLE="visibility:hidden;display:none"
      ALIGN=LEFT style="
      font-weight:700">
      </OBJECT>
      </DIV>
      <IFRAME id="
      myFrame" WIDTH=800 HEIGHT=300 ></IFRAME>
      <script type="
      text/javascript">
      aname=new Array() // массив заголовков
      aname[1]="
      Набор начинающего веб-мастера"
      aname[2]="
      Строим сайт"
      aname[3]="
      Основы JavaScrip"
      aname[4]="
      Изучаем JavaScript"
      aname[5]="
      Фреймы"
      aname[6]="
      Основы РНР"
      aname[7]="
      Характеристика языка"
      aname[8]="
      Переменные"

      adocs=new Array() // массив ссылок
      adocs[1]="
      32.html"
      adocs[2]="
      "
      adocs[3]="
      "
      adocs[4]="
      ../javapage.php"
      adocs[5]="
      ../javapage38.php"
      adocs[6]="
      "
      adocs[7]="
      ../phppage3.php"
      adocs[8]="
      ../phppage5.php"

      // Создание узлов
      myTreeView.Nodes.Add(null,null,"
      Ch0",aname[1])
      myTreeView.Nodes.Add(null,null,"
      Ch1",aname[2])
      myTreeView.Nodes.Add("
      Ch1",4,"Ch11",aname[3])
      myTreeView.Nodes.Add("
      Ch11",4,"Ch111",aname[4])
      myTreeView.Nodes.Add("
      Ch11",4,"Ch112",aname[5])
      myTreeView.Nodes.Add("
      Ch1",4,"Ch12",aname[6])
      myTreeView.Nodes.Add("
      Ch12",4,"Ch121",aname[7])
      myTreeView.Nodes.Add("
      Ch12",4,"Ch122",aname[8])
      // Некоторые параметры дерева
      myTreeView.Style=7
      myTreeView.LineStyle=1
      myTreeView.BorderStyle=1

      myFrame.location.href =adocs[1] // начальное содержимое фрейма

      function mydiv.onclick() { // обработка щелчков на заголовках
      if (!myTreeView.SelectedItem) return
      if (myTreeView.SelectedItem.Children == 0)
      myFrame.location.href =adocs[myTreeView.SelectedItem.Index]
      }
      function bt.onclick(){ // щелчок на кнопке
      if (myTreeView.style.visibility=="
      hidden") {
      myTreeView.style.visibility="
      visible"
      myTreeView.style.display=''
      bt.innerText="
      Оглавление скрыть"
      document.all.myFrame.style.width=500
      }
      else {
      myTreeView.style.visibility="
      hidden"
      myTreeView.style.display='none'
      bt.innerText="
      Оглавление"
      document.all.myFrame.style.width=800
      }}
      </script >
      </body>
      </html>

      В окне веб-браузера это будет выглядеть ТАК.