繁体   English   中英

带有面板列表组的Bootstrap 3缩略图中的TYPO3 TMENU

[英]TYPO3 TMENU in Bootstrap 3 thumbnail with panel list-group

我想在TYPO3中提供某种不太容易的TMENU的总览站点。 依靠以下HTML结构:

  <div class="col-xs-12 col-sm-4 col-md-4"> <div class="thumbnail"> <div class="headline"> <h2>Headline</h2> </div> <img src="img/product/picture.jpg" alt="..."> <div class="caption"> <div class="panel list-group"> <a href="#" class="list-group-item" data-toggle="collapse-next">Menu 1</a> <div class="collapse list-group-submenu"> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a> </div> <a href="#" class="list-group-item" data-toggle="collapse-next">Menu 2</a> <div class="collapse list-group-submenu"> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a> <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a> </div> <a href="#" class="list-group-item">Menu 3</a> <a href="#" class="list-group-item">Menu 4</a> <a href="#" class="list-group-item">Menu 5</a> </div> </div> </div> </div> 

现在的问题是,如果没有第二个导航区域,则主DIV不会关闭。 而且我无法从菜单的第一级分配的遮罩中插入图片。 包装不能插入任何数据。 这是我实际的不当尝试。 这里有什么想法吗?

 # OVERVIEW MENU lib.overviewmenu = HMENU lib.overviewmenu { special = directory special.value.data = leveluid:2 # erstes level 1 = TMENU 1.expAll = 1 1 { # no state: normale Formatierung wrap = NO { before.cObject = LOAD_REGISTER before.cObject { parentImage.cObject = IMAGE parentImage.cObject.field = tx_mask_menuteaser } allWrap = <div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail"><div class="headline"><h2>| wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } subst_elementUid = 1 } ACT = 1 ACT < .NO } 2 < .1 2 { # no state: normale Formatierung wrap = </h2></div><img src="{register:parentImage}" alt=""><div class="caption"><div class="list-group">|</div></div></div></div> NO { allWrap = wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" subst_elementUid = 1 } ACT = 1 ACT < .NO IFSUB = 1 IFSUB { #ATagBeforeWrap = 1 stdWrap { wrap = |<i class="fa fa-caret-down pull-right"></i> wrap.insertData = 1 htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" data-toggle="collapse-next" subst_elementUid = 1 } ACTIFSUB = 1 ACTIFSUB < .IFSUB } 3 < .2 3 { # no state: normale Formatierung wrap = <div class="list-group-submenu collapse">|</div> NO { allWrap = linkWrap = <span class="fa fa-chevron-right"></span>&nbsp;| wrapItemAndSub = ||*|||*|| ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item sub-item small" subst_elementUid = 1 } ACT = 1 ACT < .NO } } 

谢谢,最好,克里斯

ouch代码非常不平衡。

尝试在打开包装盒的地方将其关闭。
在使用beforeafter

否则,请注意顶层的IFSUB 如果在下一级菜单中关闭标签,则只有在确定具有下一级标签时才应打开它。

尝试这样的事情。

你的HTML是这样的。

<div class="col-xs-12 col-sm-4 col-md-4">
    <div class="thumbnail">
      <div class="headline">
        <h2>Headline</h2>
      </div>
      <img src="img/product/picture.jpg" alt="...">
      <div class="caption">              
         <!-- Add menu typoscript here -->
      </div>
   </div>              
</div>

和您的打字稿喜欢这个。

lib.mainmenu = TMENU
lib.mainmenu{
  expAll = 1
  wrap = <div class="panel list-group">|</div>
  NO{
    ATagParams = class="list-group-item"
  }

  ACT = 1
  ACT {
    linkWrap= <li class="active">|</li>
  }

   IFSUB < .NO
   IFSUB = 1
   IFSUB {
       wrapItemAndSub = <div class="collapse list-group-submenu">|</div>
       ATagParams = class="list-group-item sub-item small"
       stdWrap.wrap = <span class="fa fa-chevron-right"></span> |
    }
}

关于这个html结构呢? 会容易得多,不是吗?

                   <div class="panel list-group thumbnail">
                     <div class="headline"><h2>Headline</h2></div>
                     <img src="img/product/picture.jpg" alt="...">
                     <a href="#" class="list-group-item" data-toggle="collapse-next">Page 1</a>
                       <div class="collapse list-group-submenu">
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a>
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a>
                       </div>                        
                     <a href="#" class="list-group-item" data-toggle="collapse-next">Page 2</a>
                       <div class="collapse list-group-submenu">
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 1</a>
                         <a class="list-group-item sub-item small"><span class="fa fa-chevron-right"></span> Submenu 2</a>
                       </div>                            
                     <a href="#" class="list-group-item">Page 3</a>
                     <a href="#" class="list-group-item">Page 4</a>
                     <a href="#" class="list-group-item">Page 5</a>
                   </div>

我懂了:

 # OVERVIEW MENU lib.overviewmenu = HMENU lib.overviewmenu { special = directory special.value.data = leveluid:2 # erstes level 1 = TMENU 1.expAll = 1 1 { # no state: normale Formatierung NO { after.cObject = COA after.cObject { 10 = FILES 10 { references { table = pages uid.field = uid fieldName = tx_mask_menuteaser } renderObj = IMG_RESOURCE renderObj { file.import.data = file:current:uid file.treatIdAsReference = 1 stdWrap.wrap= <img src='|' /> } } } linkWrap = <div class="headline"><h2>|</h2></div> wrapItemAndSub = <div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div>|*|<div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div>|*|<div class="col-xs-12 col-sm-4 col-md-4"><div class="thumbnail">|</div></div> stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } subst_elementUid = 1 } ACT = 1 ACT < .NO } 2 < .1 2 { # no state: normale Formatierung wrap = <div class="caption"><div class="list-group">|</div></div> NO { linkWrap = allWrap = wrapItemAndSub = ||*|||*|| #ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" subst_elementUid = 1 } ACT = 1 ACT < .NO IFSUB = 1 IFSUB { #ATagBeforeWrap = 1 stdWrap { wrap = |<i class="fa fa-caret-down pull-right"></i> wrap.insertData = 1 htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item" data-toggle="collapse-next" subst_elementUid = 1 } ACTIFSUB = 1 ACTIFSUB < .IFSUB } 3 < .2 3 { # no state: normale Formatierung wrap = <div class="list-group-submenu collapse">|</div> NO { allWrap = linkWrap = <span class="fa fa-chevron-right"></span>&nbsp;| wrapItemAndSub = ||*|||*|| ATagBeforeWrap = 1 stdWrap { htmlSpecialChars = 0 htmlSpecialChars.preserveEntities = 0 crop = 50 | … } ATagParams = class="list-group-item sub-item small" subst_elementUid = 1 } ACT = 1 ACT < .NO } } 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM