在 TYPOSCRIPT 菜单中计算子项
Count Childrens in a TYPOSCRIPT menu
我想知道 TYPOSCRIPT 中是否有一种方法可以计算菜单中的子项数。
输出应该是这样的:
<ul class="ebene1" data-elements="4">
<li><a href="element1">Element 1</a></li>
<li><a href="element1">Element 2</a></li>
<li><a href="element1">Element 2</a></li>
<li><a href="element1">Element 2</a></li>
</ul>
我的代码如下所示:
script.NAV = HMENU
script.NAV {
special = directory
special.value = 6
1 = TMENU
1 {
expAll = 1
noBlur = 1
wrap = <ul class="menu main" id="nav-main">|</ul>
NO = 1
NO.wrapItemAndSub = <li class="first element1">|</li> |*| <li class="element1">|</li> |*| <li class="last element1">|</li>
CUR = 1
CUR.wrapItemAndSub = <li class="first element1 current">|</li> |*| <li class="element1 current">|</li> |*| <li class="last element1 current">|</li>
...
谢谢,非常感谢任何帮助。
您需要 stdWrap 函数 numrows
。您可以在其中添加任何 table 和 select
语句。这是一个例子:
lib.countmenu = COA
lib.countmenu {
10 = HMENU
10.1 = TMENU
10.1 {
wrap = <ul>|</ul>
NO {
stdWrap.cObject = COA
stdWrap.cObject {
30 = TEXT
30.numRows.table = pages
30.numRows.select.pidInList.field = uid
30.numRows.select.where = nav_hide!=1 AND doktype!=5 AND doktype!=6
30.dataWrap = {field:title} [|]
}
wrapItemAndSub = <li>|</li>
}
}
}
实际上,虽然这可以像@Marcus 展示的那样完成(我相信该片段有效,但没有检查)它可能是我们 JavaScript 更快的方法;就像:
<ul class="ebene1">
<li><a href="element-1">Element 1</a></li>
<li><a href="element-2">Element 2</a></li>
<li><a href="element-3">Element 3</a></li>
<li><a href="element-x">Element X</a></li>
</ul>
<script>$('.ebene1').attr('data-elements', $('.menu > li').length);</script>
并且CSS喜欢:
.ebene1[data-elements="4"] {
background-color: yellow;
}
另一方面...
如果您有包含 未知 个项目的动态菜单,而不是添加许多 CSS 声明,例如
.ebene1[data-elements="3"] li {width: 33.333%;}
.ebene1[data-elements="4"] li {width: 25%;}
.ebene1[data-elements="5"] li {width: 20%;}
避免通过 JS 添加 data-
属性,只需通过计算正确的值来更改 width
:
$('.ebene1 > li').css({width: 100 / $('.ebene1 > li').length + '%'});
像这样使用寄存器 {register:count_MENUOBJ} 应该可以解决您的问题。
1 = TMENU
1 {
NO = 1
NO {
wrapItemAndSub.insertData = 1
wrapItemAndSub = <li class="element-{register:count_MENUOBJ}">|</li>
}
}
我想知道 TYPOSCRIPT 中是否有一种方法可以计算菜单中的子项数。
输出应该是这样的:
<ul class="ebene1" data-elements="4">
<li><a href="element1">Element 1</a></li>
<li><a href="element1">Element 2</a></li>
<li><a href="element1">Element 2</a></li>
<li><a href="element1">Element 2</a></li>
</ul>
我的代码如下所示:
script.NAV = HMENU
script.NAV {
special = directory
special.value = 6
1 = TMENU
1 {
expAll = 1
noBlur = 1
wrap = <ul class="menu main" id="nav-main">|</ul>
NO = 1
NO.wrapItemAndSub = <li class="first element1">|</li> |*| <li class="element1">|</li> |*| <li class="last element1">|</li>
CUR = 1
CUR.wrapItemAndSub = <li class="first element1 current">|</li> |*| <li class="element1 current">|</li> |*| <li class="last element1 current">|</li>
...
谢谢,非常感谢任何帮助。
您需要 stdWrap 函数 numrows
。您可以在其中添加任何 table 和 select
语句。这是一个例子:
lib.countmenu = COA
lib.countmenu {
10 = HMENU
10.1 = TMENU
10.1 {
wrap = <ul>|</ul>
NO {
stdWrap.cObject = COA
stdWrap.cObject {
30 = TEXT
30.numRows.table = pages
30.numRows.select.pidInList.field = uid
30.numRows.select.where = nav_hide!=1 AND doktype!=5 AND doktype!=6
30.dataWrap = {field:title} [|]
}
wrapItemAndSub = <li>|</li>
}
}
}
实际上,虽然这可以像@Marcus 展示的那样完成(我相信该片段有效,但没有检查)它可能是我们 JavaScript 更快的方法;就像:
<ul class="ebene1">
<li><a href="element-1">Element 1</a></li>
<li><a href="element-2">Element 2</a></li>
<li><a href="element-3">Element 3</a></li>
<li><a href="element-x">Element X</a></li>
</ul>
<script>$('.ebene1').attr('data-elements', $('.menu > li').length);</script>
并且CSS喜欢:
.ebene1[data-elements="4"] {
background-color: yellow;
}
另一方面...
如果您有包含 未知 个项目的动态菜单,而不是添加许多 CSS 声明,例如
.ebene1[data-elements="3"] li {width: 33.333%;}
.ebene1[data-elements="4"] li {width: 25%;}
.ebene1[data-elements="5"] li {width: 20%;}
避免通过 JS 添加 data-
属性,只需通过计算正确的值来更改 width
:
$('.ebene1 > li').css({width: 100 / $('.ebene1 > li').length + '%'});
像这样使用寄存器 {register:count_MENUOBJ} 应该可以解决您的问题。
1 = TMENU
1 {
NO = 1
NO {
wrapItemAndSub.insertData = 1
wrapItemAndSub = <li class="element-{register:count_MENUOBJ}">|</li>
}
}