Выделение активного пункта меню XSLT — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «Часто необходимо выделить только текущий пункт меню, на котором находимся. А если меню име…»)
 
 
(не показаны 3 промежуточные версии 1 участника)
Строка 1: Строка 1:
 +
'''Актуально для версии 2.9'''
 +
 
Часто необходимо выделить только текущий пункт меню, на котором находимся. А если меню имеет древовидную структуру то status="active" не поможет, потому что применяется ко всей вложенности страниц.
 
Часто необходимо выделить только текущий пункт меню, на котором находимся. А если меню имеет древовидную структуру то status="active" не поможет, потому что применяется ко всей вложенности страниц.
  
Строка 7: Строка 9:
 
  Если её нет, обязательно сделайте.
 
  Если её нет, обязательно сделайте.
  
Далее в основной шаблон, в любом месте, можно сразу после <body> или перед </body>, добавляем такой блок:
+
Далее, в основной шаблон, в любом месте, можно сразу после <body> или перед </body>, добавляем такой блок:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<div style="background: #eee;
 
<div style="background: #eee;
Строка 48: Строка 50:
 
</span>
 
</span>
 
</xsl:template>
 
</xsl:template>
<source>
+
</source>
 +
 
 
[[Категория: Верстка в XSLT]]
 
[[Категория: Верстка в XSLT]]

Текущая версия на 11:15, 5 июня 2013

Актуально для версии 2.9

Часто необходимо выделить только текущий пункт меню, на котором находимся. А если меню имеет древовидную структуру то status="active" не поможет, потому что применяется ко всей вложенности страниц.

Для того, чтобы сделать активным только текущий пункт меню, можно воспользоваться конструкцией XSL:IF.
Для удобного, элементарного примера приводим код:

Убедитесь что у вас есть переменная <xsl:variable name="document-page-id" select="/result/@pageId" />

Если её нет, обязательно сделайте.

Далее, в основной шаблон, в любом месте, можно сразу после <body> или перед </body>, добавляем такой блок:

<div style="background: #eee;
            border: 2px solid black;
            position: fixed; top:100px; left:100px;
            width: 400px; height: 400px;
            z-index: 200">
	МЕНЮ:<xsl:apply-templates select="document('udata://content/menu//2/')/udata" mode="my"/>				
</div>

После этого шаблона (xsl:template) добавляем два своих:

<!-- Обромить все меню списком, этот пункт можно опускать -->
<xsl:template match="udata[@method = 'menu']" mode="my">
	<ul><xsl:apply-templates select="items/item" mode="my2" /></ul>
</xsl:template>
<!-- Решение проблемы, использование конструкций IF -->
<xsl:template match="item" mode="my2">
	<li>
		<xsl:if test="@id = $document-page-id">
			<b><a href="{@link}"><xsl:value-of select="@name" /></a></b>
		</xsl:if>
		<xsl:if test="@id != $document-page-id">
			<a href="{@link}"><xsl:value-of select="@name" /></a>
		</xsl:if>
		<xsl:apply-templates select="items/item" mode="my3" />
	</li>
</xsl:template>
<!-- Вложенный подуровень, для демонстрации рабочего решения -->
<xsl:template match="item" mode="my3">
	<span><br />--
		<xsl:if test="@id = $document-page-id">
			<b><a href="{@link}"><xsl:value-of select="@name" /></a></b>
		</xsl:if>
		<xsl:if test="@id != $document-page-id">
			<a href="{@link}"><xsl:value-of select="@name" /></a>
		</xsl:if>
	</span>
</xsl:template>