2013-09-25 32 views
5

我目前正在創建一個Joomla菜單模塊,但香港專業教育學院遇到的一些問題..PHP分裂UL均勻成3列的Joomla菜單模塊

我試圖子菜單項分成3列,目前我使用此:

$counter = 0; 

if($item->level == 2): 
    $counter += count($item); 
endif; 

if($item->level == 1): 
    $counter = 0; 
endif; 

if($counter%3 == 0 && $item->level == 2){ 
     echo '</ul><ul class="col-lg-3">'; 
    } 

但這只是它們分組到3的

這裏就是整個如default.php:

<?php 

// No direct access 
defined('_JEXEC') or die; 

// Note. It is important to remove spaces between elements. 
$counter = 0; 

?> 

<ul class="nav navbar-nav <?php echo $class_sfx; ?> nav-mega"<?php 
$tag = ''; 
if ($params->get('tag_id') != null) 
{ 
    $tag = $params->get('tag_id') . ''; 
    echo ' id="' . $tag . '"'; 
} 
?>> 

<?php 
    foreach ($list as $i => &$item) { 

     if($item->level == 2): 
      $counter += count($item); 
     endif; 

     if($item->level == 1): 
      $counter = 0; 
     endif; 

     $class = 'item-' . $item->id; 
     if ($item->id == $active_id) { 
      $class .= ' current'; 
     } 

     if (in_array($item->id, $path)){ 
      $class .= ' active'; 
     }elseif ($item->type == 'alias'){ 
      $aliasToId = $item->params->get('aliasoptions'); 
      if (count($path) > 0 && $aliasToId == $path[count($path) - 1]) { 
       $class .= ' active'; 
      }elseif (in_array($aliasToId, $path)){ 
       $class .= ' alias-parent-active'; 
      } 
     } 

     if ($item->deeper){ 
      $class .= ' deeper dropdown'; 
     } 

     if ($item->parent){ 
      $class .= ' parent'; 
     } 

     if (!empty($class)){ 
      $class = ' class="' . trim($class) . '"'; 
     } 

     echo '<li' . $class . '>'; 

     // Render the menu item. 
     switch ($item->type){ 
      case 'separator': 
      case 'url': 
      case 'component': 
       require JModuleHelper::getLayoutPath('mod_blogmenu', 'default_' . $item->type); 
      break; 

      default: 
       require JModuleHelper::getLayoutPath('mod_blogmenu', 'default_url'); 
      break; 
     } 

     // The next item is deeper. 
     if($counter%3 == 0 && $item->level == 2){ 
      echo '</ul><ul class="col-lg-3">'; 
     } 

     if ($item->deeper){ 
      echo '<div class="dropdown-menu mega-dropdown">'; 
      echo '<div class="mega-image col-lg-3 thumbnail visible-md visible-lg"><img src="'.$item->menu_image.'" /></div>'; 
      echo '<ul class="col-lg-3">'; 
     } 
       // The next item is shallower. 
     elseif ($item->shallower){ 

      echo str_repeat('</ul><div class="mega-caption"></div></div>', $item->level_diff); 
     } 
       // The next item is on the same level. 
     else { 
      //echo '</li>'; 
     } 
    } 

?> 
</ul> 

對不起,很多代碼;我仍然在努力學習PHP並試圖理解Joomla的做事方式,但這對我來說並不是那麼容易。

+0

我沒潛水過深地進入代碼,但是如果我正確地理解了設計,爲什麼要在打開和關閉這個'ul'應該包含的'li'之間放置一段關閉'ul'的代碼? – MasterAM

+0

,因爲我不知道我在做什麼?..我解決了大部分問題,現在只是將它們分成3列......不適合更新我的問題..感謝您的回覆 –

+0

由於您已經有了一個分層列表,在HTML中不可能(就像你在一般意義上做的那樣)創建多個列。我將使用'RecursiveIterator',因爲它可以跟蹤級別,因爲您需要在一列結束時關閉整個UL/LI層次結構,並在下一列開始時重新打開它。解釋起來並不容易,編寫代碼也很容易,一些相關代碼可能與以下鏈接有關:[檢查n深度樹中的值?](http://stackoverflow.com/a/12758996/367456) – hakre

回答

1

在遍歷所有菜單項之前,計算每個菜單項的所有子菜單項。 (聲明:我沒有任何的Joomla菜單的知識,但我希望$用品 - >父 - > ID引用父項的ID)

$submenuItemsTotals = array(); 
foreach ($list as $i => &$item) { 
    if ($item->level == 2) { 
     if (!isset($submenuItemsTotal[$item->parent->id])) { 
      $submenuItemsTotal[$item->parent->id] = 1; 
     } else { 
      $submenuItemsTotal[$item->parent->id]++; 
     } 
    } 
} 

$itemsPerColumn = array(); 
foreach ($submenuItemsTotals as $parentId => $submenuItemsTotal) { 
    $itemsPerColumn[$parentId] = ceil($submenuItemsTotal/3); 
} 


// Here comes your existing code with a small change 

foreach ($list as $i => &$item) { 
    [your code....] 

    // The next item is deeper. 
    if($item->level == 2 && ($counter % $itemsPerColumn[$item->parent->id]) == 0){ 
     echo '</ul><ul class="col-lg-3">'; 
    } 

    [your code....] 
} 
+0

謝謝,我會在一瞬間嘗試這個 –

+0

再次感謝您的回答,但我得到以下錯誤: 注意:未定義的索引:108在/storage/websites/niflas/modules/mod_blogmenu/tmpl/default.php上第89行警告:89行中的/storage/websites/niflas/modules/mod_blogmenu/tmpl/default.php中的零除 –

0

你可以把它放入CSS列嗎?

<!DOCTYPE html> 
<html> 
<head> 

<style> 
div.columns { 
column-width: auto; 
-moz-column-width: auto; 
-webkit-column-width: auto; 
column-count: 3; 
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-gap: 1em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em; 
} 

.nosplit { 
display: inline-block; 
} 
</style> 

</head> 

<body> 

<div class="columns"> 
<ul> 
<li>item01</li> 
<li>item02</li> 
<li>item03</li> 
<li>item04</li> 
<li class="nosplit">item05 
    <ul> 
    <li>item05a</li> 
    <li>item05b</li> 
    </ul> 
    </li> 
<li>item06</li> 
<li>item07</li> 
<li class="nosplit">item08 
    <ul> 
    <li>item08a</li> 
    <li>item08b</li> 
    <li>item08c</li> 
    </ul> 
    </li> 
<li>item09</li> 
<li>item10</li> 
</ul> 

</body> 

</html> 
+0

嘿,獨特的解決方案謝謝,但我需要支持IE8 ..這仍然工作? –

+0

@DawidvanderHoven - 使用這種方法,你將不得不使用JS插件,因爲IE8不支持列。應該用「div」分割每個「列」,並給它「float:left;' – Lodder

+0

oh ya,ie8。唉。 – egrutz