Вертикальное выпадающее меню на jQuery для HostCMS
Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…
Заметка для тех, кто начинает работать с языком XSLT. Небольшие хитрости, которые моут быть полезны при написании сайтов.
Для тех, кто не знает XSL (eXtensible Stylesheet Language) — семейство рекомендаций консорциума W3C, описывающее языки преобразования и визуализации XML-документов. Состоит из трех частей: * XSL Transformations (XSLT) — язык преобразований XML-документов. Информация взята из Wikipedia.
Подробную информацию о языке XSL можно узнать в онлайн учебнике на сайте w3schools.com.
Вернемся к нашим «хитростям».
Такое возникает, например, когда нужно убрать правый padding или margin у последнего элемента.
<xsl:if test="position() mod 4 = 0 and position () > 3"> <xsl:attribute name="class">last</xsl:attribute> </xsl:if>
<xsl:if test="position()! = last ()"><xsl:text>, </xsl:text></xsl:if></xsl:template>
Т.е. задание определенного количества элементов в строке. В моем примере — 4.
Для нумерованных списков:
<xsl:if test="position() mod 4 = 0 and position ()! = last()"> <xsl:text disable-output-escaping="yes"> </ul> <ul class="shop_table"> </xsl:text> </xsl:if>
Для таблиц:
<xsl:if test="position() mod 4 = 0"> <xsl:text disable-output-escaping="yes"> </tr> <tr valign="top"> </xsl:text> </xsl:if>
Для верстки на DIVах:
<xsl:if test="position() mod 2 = 0 and position()! = last()"> <xsl:text disable-output-escaping="yes"> </div> <div class="shop_table"> </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>
Проверяем выводимые элементы структуры по 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>
Пример для 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>
Полезно, если нам нужно их выделить цветом или применить какие-то другие стили.
<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>
Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.Другие статьи по теме:
Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...
Небольшая доработка стандартного XSL шаблона «Поиск» для сайтов на HostCMS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.
Предлагаю вариант показа отложенного товара и содержимого краткой корзины в модальном окне в момент, когда Пользователь откладывает товар для совершения покупки. Решение делалось на основе встроенного в HostCMS адаптивного шаблона с подключеной библиотекой Bootstrap...