<xsclass="underline" template match="catalog">
<xsclass="underline" apply-templates select="category"/>
</xsclass="underline" template>
<!-- Шаблон обработки категории-->
<xsclass="underline" template match="category">
<!-- Параметр, указывающий отступ -->
<xsclass="underline" param name="indent"/>
<!-- Выводим отступ -->
<xsclass="underline" value-of select="$indent"/>
<!-- Выводим информацию о категории в виде ссылки -->
<а href="javascript:expand('{generate-id(.)}')">
<!-- Перед названием категории выводим соответствующую иконку -->
<img height="11" width="11" border="0">
<xsclass="underline" choose>
<!--
| Если категория не содержит субэлементов,
| выводим иконку с точкой
+-->
<xsclass="underline" when test="not(*)">
<xsclass="underline" attribute name="src">images/dot.gif</xsclass="underline" attribute>
</xsclass="underline" when>
<!--
| Если категория принадлежит ветке выбранной категории,
| выводим иконку с минусом, что означает раскрытую ветку
+-->
<xsclass="underline" when test="count(.|$path)=count($path)">
<xsclass="underline" attribute name="src">images/minus.gif</xsclass="underline" attribute>
</xsclass="underline" when>
<!--
| Если категория не принадлежит ветке выбранной категории,
| выводим иконку с плюсом, что означает нераскрытую ветку
+-->
<xsclass="underline" otherwise>
<xsclass="underline" attribute name="src">images/plus.gif</xsclass="underline" attribute>
</xsclass="underline" otherwise>
</xsclass="underline" choose>
</img>
<!--
| Выводим неразрывный пробел.
|   в Unicode соответствует
+-->
<xsclass="underline" text> </xsclass="underline" text>
<!-- Выводим название категории -->
<xsclass="underline" value-of select="@title"/>
</a>
<br/><xsclass="underline" text>
</xsclass="underline" text>
<!--
| Если категория принадлежит раскрываемой ветке,
| обрабатываем ее подкатегории
+-->
<xsclass="underline" if test="count(.|$path)=count($path)">
<xsclass="underline" apply-templates select="category">
<!-- Увеличиваем отступ на три пробела -->
<xsclass="underline" with-param name="indent"
select="concat($indent,'   ')"/>
</xsclass="underline" apply-templates>
</xsclass="underline" if>
</xsclass="underline" template>
</xsclass="underline" stylesheet>
Теперь осталось лишь только создать страницу, которая при помощи JavaScript и MSXML будет выполнять преобразования и выводить результат.
Для того чтобы воспользоваться возможностями MSXML, мы включим в нашу страницу два объекта:
<!-- Объект, представляющий входящий документ -->
<object
id="source"
width="0"
height="0"
classid="clsid:f5078f32-c551-11d3-89b9-0000f81fe221">
<param name="async" value="false">
<param name="validateOnParse" value="false">
</object>
<!-- Объект, представляющий документ преобразования -->
<object
id="stylesheet"
width="0"
height="0"
classid="clsid:f5078f32-c551-11d3-89b9-0000f81fe221">
<param name="async" value="false">
<param name="validateOnParse" value="false">
</object>
"Магический" код clsid:f5078f32-c551-11d3-89b9-0000f81fe221, который присутствует в тегах обоих объектов, на самом деле не что иное, как уникальный идентификатор библиотеки MSXML 3.0, которую мы и будем использовать для выполнения преобразования. Итак, код нашей HTML- страницы будет выглядеть следующим образом.
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<style type="text/css">
body {font-family:Tahoma,Verdana,Arial,sans-serif; font-size:14px}
a:link {COLOR:#990000; BACKGROUND: #ffffff; TEXT-DECORATION: none}
a:hover {BACKGROUND: #dddddd; TEXT-DECORATION: none}
a:visited {COLOR: #990000; TEXT-DECORATION: none}
</style>
<script language="JavaScript">
<!--
// Объявляем глобальные переменные
// Входящий документ
var source;
// Преобразование
var stylesheet;
// Результат
var result;
// Функция, выполняющая действия по инициализации
function init() {
// Инициализируем ссылку на объект входящего документа
source = document.all['source'];
// Загружаем входящий документ
source.load('source.xml');
// Инициализируем ссылку на объект преобразования
stylesheet = document.all['stylesheet'];
// Загружаем документ преобразования
stylesheet.load('stylesheet.xsl');
// Находим элемент, в который мы будем выводить
// результат обработки
result = document.all['result'];
}
// Функция, выполняющая "раскрытие"
//определенной ветки дерева категорий.
function expand(id) {
// Получаем ссылку на атрибут select
// объявления параметра current
var attSelect = stylesheet.selectSingleNode(
"/xsclass="underline" stylesheet/xsclass="underline" param[@name='current']/@select");
// Изменяем значение этого атрибута. Одинарные кавычки необходимы
// для того, чтобы новое значение воспринималось как литерал.
attSelect.nodeValue = "'" + id + "'";
// Выполняем преобразование
strResult = source.transformNode(stylesheet);
// Обновляем страницу