Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Блуждание по узлам нод

Автор: 12345c 6.9.2006, 14:48

Когда хотят сделать скрывание частей страницы по клику на управляющих элементах (показать весь текст сообщения или подсказку), обычно пишут скрипт на 2 строчки.

http://forum.vingrad.ru/index.php?showtopic=66278
http://forum.vingrad.ru/index.php?showtopic=91118

Если таких участков на странице несколько, увеличивается и количество строчек кода, особенно, если способов представления управляющих кнопок несколько. Требуется общий скрипт, управляющий появлением и скрытием блоков и самих кнопок. Каждое действие производит ряд появлений и скрытий объектов относительно себя или относительно определённого объекта. Поэтому создаём функцию, первый параметр которой укажет на объект-привязку, а следующие параметры будут представлять список однородных действий - укажут путь прохождения до целевого объекта и действие с ним. Например, каждая команда описывается 1 символом. "-" - прохождение по дереву документа вверх, цифра - прохождение вниз на нужную ноду, "b" - присваивание стиля display='block', 't' - стиля для визуализации ячейки таблицы: display=(document.all?'block':'table-cell'), "n" - 'none'.
При введении такой системы обозначений не придётся писать очень длинные указания операций в параметрах команды, а переменное число параметров даёт гибкость в управлении видимостью блоков.
Такая система реализована в очень компактной функции:

Код

fShHid=function(t){al=arguments.length;
  for(var i=1;i<al;i++){
    c=arguments[i];cl=c.length;o=t;
    for(j=0;j<cl;j++){cj=c.charAt(j);
      if(cj=='-'){o=o.parentNode;continue;}
      if(/\d/.test(cj)){o=o.childNodes[parseInt(cj)];continue;}
      if(cj=='b'){o=o.style.display='block';continue;}
      if(cj=='n'){o=o.style.display='none';}
      if(cj=='i'){o=o.style.display='inline';}
      if(cj=='t'){o=o.style.display=d.all&&!self.opera?'block':'table-cell';}
 }  }}

и применена на странице http://js2.ru/files/js-man3.htm .
Правда, FF/Opera начинает реагировать на любой пробел между тегами как на новую ноду, поэтому приходится убирать пробелы и переносы строк. Желательно, чтобы такая функция игнорировала пробелы в указанных бр-рах.
Применение демонстративное, потому что в планах предполагается усложнение функции, чтобы она могла скрывать за 1 команду не один блок, а группу блоков в определённом узле (символ "*" - обращение ко всем нодам узла). Сейчас управление видимостью в коде HTML выглядит таким образом:

Код

<table class=jsObj><tr><th><a href=js/standart.html>Стандарты и совместимость</a><div
  class=hidSh style=text-align:right onclick=fShHid(this,'n','--10b','--11n')><span>Свернуть</span></div>
</th><td><div
  class=shHid onclick=fShHid(this,'n','--01b','-1b')><span>Содержание</span></div><ul class=invi><ul>
<li><a href=js/standart.html#clientserv>Клиентский и серверный JavaScript</a> </li><li> ...

<style>.shHid{display:inherit;} .hidSh{display:none;} .invi{display:none}
.shHid span,.hidSh span{padding:0 2px;cursor;pointer;cursor:hand;font-weight:normal;font-style:italic;border:1px solid #4682B4;}
</style>

Стили используются для задания оформления и начальной видимости кнопок.
Если меняется структура, которой надо управлять (например, объект "Date" на странице), меняется число и значения параметров, функция остаётся та же самая. В следующем примере надо управлять не 3, а 4 аналогичными блоками:

Код

<table class=jsObj><tr><th><a href=js/DateJS.html>Date</a><div class=shHid style=text-align:right onclick=fShHid(this,'n','--10b','--11n','--20n')><span>Свернуть</span></div>
</th><td><div class=hidSh onclick=fShHid(this,'n','--01b','-1b','--20b')><span>Содержание</span></div><ul><li>Свойства</li><ul>
<li> ...

Это простой пример работы, а в коде есть пример одновременной работы с 11 блоками: onclick=fShHid(this,'n','-0b','---1000011n','---1000010b','---1000001n','---1010011n','---1010010b','---1010001n','---1020011n','---1020010b','---1020001n'). Введение групповых операций над нодами значительно сократило бы такие выражения.