Мелкие "полезности" при работе с XSL

Мелкие "полезности" при работе с XSL
Мелкие "полезности" при работе с XSL

Заметка для тех, кто начинает работать с языком XSLT. Небольшие хитрости, которые моут быть полезны при написании сайтов.

Для тех, кто не знает XSL (eXtensible Stylesheet Language) — семейство рекомендаций консорциума W3C, описывающее языки преобразования и визуализации XML-документов. Состоит из трех частей: * XSL Transformations (XSLT) — язык преобразований XML-документов. Информация взята из Wikipedia.

Подробную информацию о языке XSL можно узнать в онлайн учебнике на сайте w3schools.com.

Вернемся к нашим «хитростям».

1. Задать определенный стиль вывода для последнего элемента в строке

Такое возникает, например, когда нужно убрать правый padding или margin у последнего элемента.

<xsl:if test="position() mod 4 = 0 and position  () > 3">
 <xsl:attribute name="class">last</xsl:attribute>
 </xsl:if>

2. Простановка знаков препинания после элемента строки, если он не последний

<xsl:if test="position()! = last  ()"><xsl:text>, </xsl:text></xsl:if></xsl:template>

3. Перевод строки после заданного элемента

Т.е. задание определенного количества элементов в строке. В моем примере — 4. 

Для нумерованных списков:

 <xsl:if test="position() mod 4 = 0 and position  ()! = last()">
 <xsl:text disable-output-escaping="yes">
 &lt;/ul&gt;
 &lt;ul class="shop_table"&gt;
 </xsl:text>
 </xsl:if>

Для таблиц:

<xsl:if test="position() mod 4 = 0">
 <xsl:text disable-output-escaping="yes">
 &lt;/tr&gt;
 &lt;tr valign="top"&gt;
 </xsl:text>
 </xsl:if>

Для верстки на DIVах:

 <xsl:if test="position() mod 2 = 0 and position()! = last()">
 <xsl:text disable-output-escaping="yes">
 &lt;/div&gt;
 &lt;div class="shop_table"&gt;
 </xsl:text>

Из примеров видно, что элементы строки будут заключены либо в <ul class= «shop_table»>, либо в тег строки таблицы <tr>, либо в <div class= «shop_table»>.

Еще вариант для верстки на DIVах:

 <xsl:if test="position() mod 3 = 0 and position()! = last()">
 <span class="table_row"></span>
 </xsl:if>

4. Пример для меню — применение стиля к заданному элементу структуры

Проверяем выводимые элементы структуры по id и применяем определенный стиль, если id совпало с указанным. В моем примере id=151. Например, таким образом можно выделить цветом элемент структуры меню, к которому нужно привлечь внимание пользователей.

 <a href="#">
 <xsl:variable name="style">
 <xsl:choose>
 <xsl:when test="@id=151">color:red;</xsl:when>
 <!-- Иначе обычный вывод с пустым стилем →
 <xsl:otherwise></xsl:otherwise>
 </xsl:choose>
 </xsl:variable>
 <xsl:value-of disable-output-escaping="yes" select="name"/>
 </a>

5. Проверка, какое выводить изображение элемента

Пример для HostCMS. Проверяем наличие загруженных изображений у элемента, например, инфосистемы — большое, малое или его нет вовсе. В зависимости от результатов проверки выводим определенное изображение.

 <xsl:choose>
 <xsl:when test="image_large! = ''"> <!--Если загружено большое изображение→
 <a href="{dir}{image_large}" title="{name}" target="_blank"><img src="{dir}{image_small}" alt="{name}" /></a>
 </xsl:when>
 <xsl:when test="image_small! = ''"> <!--Если загружено только малое изображение→
 <img src="{dir}{image_small}" alt="{name}" />
 </xsl:when>
 <xsl:otherwise> <!--Когда нет загруженных изображений→
 <img src="/images/no-image.png" alt="{name}" />
 </xsl:otherwise>
 </xsl:choose>

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

Полезно, если нам нужно их выделить цветом или применить какие-то другие стили.

 <xsl:attribute name="class">
 <xsl:choose>
 <xsl:when test="position() mod 4 = 0">right</xsl:when>
 <xsl:otherwise>left</xsl:otherwise>
 </xsl:choose>
 </xsl:attribute>

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Вертикальное выпадающее меню на jQuery для HostCMS
Вертикальное выпадающее меню на jQuery для HostCMS
Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…

HOSTCMS v.6. Краткая корзина в модальном окне
HOSTCMS v.6. Краткая корзина в модальном окне

Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки. Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap...


HOSTCMS v.6. Поиск по сайту с показом карточки товара
HOSTCMS v.6. Поиск по сайту с показом карточки товара
Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

HOSTCMS v.6. Правильная семантическая микроразметка
HOSTCMS v.6. Правильная семантическая микроразметка
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.