Урок 13. Управление шрифтами в CSS
New Page 1
WEB-программирование. Java Script(JS): Библиотека визуальных компонентов. Класс CXBrTreeView. Визуальное дерево. Продолжение.
Скачать
файлы с описанными классами можно здесь(версия
1.5).
Для
углубленного изучения web-программирования (язык
PHP и написание своей собственной CMS) советую
подписаться на
платный раздел (см. анонсы раздела "Пишем
Easy CMS").
В
выпуске 77 мы рассмотрели пример
отображения раскрывающегося дерева с применением CXBrTreeView.
Сегодня мы более подробно изучим функционал этого класса и заглянем
внутрь него. И так, порядок работы с этим классом следующий:
Шаг 1.
Определяем дочерний класс с предопределенным методом _on_node_click. В
выпуске 77 это сделано так:
|
function
CXMyBrTreeView(object) {
CXBrTreeView.call(this,object);
this._on_node_click=CXMyBrTreeView_on_node_click;
}
function
CXMyBrTreeView_on_node_click(id,level_node) {
a=document.getElementById("2")
a.innerHTML="Вы
выбрали
пункт
"+id+"
уровень
"+level_node;
alert(id+"
"+level_node)
}
|
Шаг 2.
Задать картинки узлов дерева:
| Поле |
Назначение |
| _blank_image |
Имя файла картинки пустого пространства |
| _plus_image |
Имя файла картинки свернутого узла (плюсик) |
| _minus_image |
Имя файла картинки развернутого узла (минус) |
Шаг 3.
Через свойство _nodes добавить к объекту узлы
дерева. Само свойство _nodes представляет собой класс
CХBrTreeNodes. Добавлять туда новый объект можно методом _add:
|
ob._nodes._add(new
CХBrTreeNodes(null,"Проба",arr),"Главное",arr1)
ob._nodes._add(new
CХBrTreeNodes(null,"Проба1",arr),"Второй
пункт",arr)
ob._nodes._add(null,"Третий
пункт",arr)
|
Первый
аргумент - подчиненная ветвь дерева, второй - название, узла, которое
отобразиться на экране, третий аргумент - ассоциативный массив имен файлов
картинок. Для каждого узла можно задать свои картинки узла:
Если ветвь
конечная, то в качестве подчиненной ветви ставим null.
У массива
названий файлов следующая структура:
| Поле |
Назначение |
| _open_image |
картинка развернутого узла |
| _close_image |
картинка свернутого узла |
| _end_image |
картинка конечного узла (не имеющего подчиненной ветки) |
| _is_exploded |
узел сразу отображается развернутым, если
true, иначе свернутым |
можно
обращаться непосредственно к подчиненному дереву узла через свойство
_objects_list:
|
ob._nodes._objects_list[0]._nodes._add(null,"Подпункт",arr)
ob._nodes._objects_list[0]._nodes._add(null,"Еще
подпункт",arr)
ob._nodes._objects_list[1]._nodes._add(null,"123",arr)
ob._nodes._objects_list[1]._nodes._add(null,"456",arr2)
|
Шаг 4.
Отображаем дерево:
| ...
ob._nodes._objects_list[0]._nodes._objects_list[2]._nodes._add(new
CХBrTreeNodes(null,"+++",arr),"Очень
низкое
подменю",arr)
ob._nodes._objects_list[0]._nodes._objects_list[2]._nodes._objects_list[2]._nodes._add(null,"Ну
вот
и
все",arr)
ob._draw()
|
Теперь
залезем во внутрь CXBrTreeView. Для программиста может
представлять интерес метод _out_node - выводит узел. Вот его исходный текст:
|
function
CXBrTreeView_out_node(level_node,node) {
var
Outline = _pad(level_node*4);
if(node._nodes==null)
{
Outline+=this._get_image_name(this._blank_image,null,null);
Outline+=this._get_image_name(node._data._get_as_string("_end_image"),null,null);
}
else
{
if(node._data._get_as_bool("_is_exploded"))
{
Outline+=this._get_image_name(this._minus_image,node._id,level_node);
Outline+=this._get_image_name(node._data._get_as_string("_open_image"),null,null);
}
else
{
Outline+=this._get_image_name(this._plus_image,node._id,level_node);
Outline+=this._get_image_name(node._data._get_as_string("_close_image"),null,null);
}
}
Outline +=
"<A HREF='javascript:_global_container._";
Outline +=
this._id+"._on_node_click("+node._id+","+level_node+")'
class='";
Outline +=
this._class_prefix;
Outline +=
this._get_class_style(level_node,node);
Outline +=
"'>"+node._name_node+"</A>";
if((node._data._get_as_bool("_is_exploded"))&&(node._nodes!=null))
{
Outline +=
this._out_tree(level_node+1,node._nodes);
}
return
Outline;
} |
Данный метод
сначала формирует картинку узла, в зависимости от того, свернут узел или
развернут и есть ли у него подчиненное дерево:
|
if(node._nodes==null)
{
Outline+=this._get_image_name(this._blank_image,null,null);
Outline+=this._get_image_name(node._data._get_as_string("_end_image"),null,null);
}
else
{
if(node._data._get_as_bool("_is_exploded"))
{
Outline+=this._get_image_name(this._minus_image,node._id,level_node);
Outline+=this._get_image_name(node._data._get_as_string("_open_image"),null,null);
}
else
{
Outline+=this._get_image_name(this._plus_image,node._id,level_node);
Outline+=this._get_image_name(node._data._get_as_string("_close_image"),null,null);
}
} |
Затем идет
формирование надписи узла:
|
Outline +=
"<A HREF='javascript:_global_container._";
Outline +=
this._id+"._on_node_click("+node._id+","+level_node+")'
class='";
Outline +=
this._class_prefix;
Outline +=
this._get_class_style(level_node,node);
Outline +=
"'>"+node._name_node+"</A>"; |
А вот тут то,
как раз и начинается самое интересное. Допустим, вы не хотите, что бы при
кликании на узел отрабатывалось какое то действие, а хотите сделать просто
переход по ссылке, например, для того, что бы ваше дерево было проиндексировано
поисковыми роботами. В этом случае в тексте:
|
Outline +=
"<A HREF='javascript:_global_container._";
Outline +=
this._id+"._on_node_click("+node._id+","+level_node+")'
class='"; |
нужно
организовать свое формирование ссылки, отрабатываемой при кликании. В данном
случае у нас имеет место ссылка на определенную функцию из скрипта, но вы можете
поставить, например, нужный URL:
|
Outline +=
"<A HREF='http://www.mysupersite.ru/viewcontent.php?treeid=";
Outline +=
this._id+"&nodeid="+node._id+"&levelnode="+level_node+"'
class='"; |
|
