Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Блуждание по узлам нод, скрывание и открывание блоков страницы 
:(
    Опции темы
12345c
Дата 6.9.2006, 14:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Когда хотят сделать скрывание частей страницы по клику на управляющих элементах (показать весь текст сообщения или подсказку), обычно пишут скрипт на 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'). Введение групповых операций над нодами значительно сократило бы такие выражения.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 14:07


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0623 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.