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

时间：2017-05-19 09:11:23

标签： twitter-bootstrap-3 typo3 typoscript

我想在TYPO3中呈现某种TMENU的overviewsite，这不是很容易。依赖于这种HTML结构：

＆＃13;
＆＃13; 
  <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>
＆＃13;
＆＃13;
＆＃13;

现在的问题是，如果没有第二个导航区域，主DIV就不会关闭。并且我无法从菜单的第一级中指定的掩码中插入图片。 Wrap无法插入任何数据。这是我的实际尝试不好。这里有什么想法吗？

＆＃13;
＆＃13; 
# 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      

   }  

}
＆＃13;
＆＃13;
＆＃13;

谢谢，最好，克里斯

4 个答案:

答案 0 :(得分：0)

ouch 非常不平衡的代码。

尝试在打开它的地方关闭包裹。
使用before和after。

否则请注意顶级IFSUB。如果您在下一级菜单中关闭某个代码，则只有在确定具有下一级别时才能打开该代码。

答案 1 :(得分：0)

尝试这样的事情。

您的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> |
    }
}

答案 2 :(得分：0)

这个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>

答案 3 :(得分：0)

我得到了它：

＆＃13;
＆＃13; 
# 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      

   }  

}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题