如何使用Joomla和Ajax檢測屏幕大小來適應我的導航？

我想創建一個移動網站，我試圖讓我的導航適應屏幕大小。導航的HTML結構將發生變化，我知道我可以使用CSS和@MEDIA調用。但是，它不適用於我的情況，因爲我使用Foundation from ZURB框架，我需要更改元素，從UL到DD或DL等。如何使用Joomla和Ajax檢測屏幕大小來適應我的導航？

我環顧了幾個來源，發現由於PHP在我的AJAX準備好之前首先加載，所以我無法讓導航在移動設備上正確顯示。

我需要一些方法來檢測我的屏幕大小，並將該值傳遞給我在Joomla中的PHP菜單生成函數。

我嘗試以下：

window.onload = function(){ 
var height = $(window).height(); 
var width = $(window).width(); 

$.ajax({ 
    type: "POST", 
    url: '', 
    data: { 
     "height": height, 
     "width": width 
    }, 
    success: function (data) { 

    }, 
}); 
}

mod_menu樣品：

<?php 
    require_once('FirePHPCore/FirePHP.class.php'); 
    $firephp = FirePHP::getInstance(true); 
    ob_start(); 

    $width = $_POST['width']; 

    $firephp->group('Test Group'); 
    $firephp->log('Width'); 
    $firephp->log($width); 
    $firephp->groupEnd(); 
?> 

if ($width > 767) { 

?> 

<!-- The class on the root UL tag was changed to match the Foundation nav style --> 
<ul class="nav-bar<?php echo $params->get('class_sfx');?>"<?php 
    $tag = ''; 
    if ($params->get('tag_id')!=NULL) { 
     $tag = $params->get('tag_id').''; 
     echo ' id="'.$tag.'"'; 
    } 
?>> 
<?php 
foreach ($list as $i => &$item) : 
    $id = ''; 
    if($item->id == $active_id) 
    { 
     $id = ' id="current"'; 
    } 
    $class = ''; 
    if(in_array($item->id, $path)) 
    { 
     $class .= 'current '; 
    } 
    if($item->deeper) { 
     $class .= 'parent '; 
    } 

    $class = ' class="'.$class.'item'.$item->id.'"'; 

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

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

     default: 
      require JModuleHelper::getLayoutPath('mod_menu', 'default_url'); 
      break; 
    endswitch; 

    // The next item is deeper. 
    if ($item->deeper) { 
     echo '<ul>'; 
    } 
    // The next item is shallower. 
    elseif ($item->shallower) { 
     echo '</li>'; 
     echo str_repeat('</ul></li>', $item->level_diff); 
    } 
    // The next item is on the same level. 
    else { 
     echo '</li>'; 
    } 
endforeach; 
?></ul> 
<?php } ?>

然後我使用if條件來檢查屏幕的寬度和選擇導航的類型。一個導航使用UL結構，另一個必須使用DL DD結構。

我用FirePHP來查看頁面是如何加載的，我的導航沒有顯示出來，因爲PHP在Ajax準備好之前首先加載，所以我沒有看到我的導航。我需要我的PHP等待，直到Ajax準備好或頁面的一部分等待。我不確定該從哪裏出發。

我在看Joomla MooTools，不確定是否可以利用它來等待Ajax在加載頁面之前加載。

我知道，有更簡單的方法，比如在Joomla中製作一個全新的菜單項，或者在Joomla中隱藏東西來讓它工作，但我想要一個更乾淨優雅的方式。

如果任何人有任何代碼示例。請發佈。

來源

2012-08-14 Vyache

的解決方案是通過瀏覽器來識別：

User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

我找到了一個很好的指導here。

來源

2012-08-21 00:37:21 Vyache

見下面鏈接

http://forum.joomla.org/viewtopic.php?f=642&t=718062

或閱讀它

我想你可能會使得這個更難那麼它必須是。通常我會建議使用CSS和@media，它仍然可以實現，以允許使用現有標準加載任何自適應樣式，而無需編寫任何新代碼。然而，模塊圖像大小的調整是您的「問題」的肉在哪裏;這將需要一些手滾的善良。

您是否編寫幻燈片模塊代碼？您可以輕鬆運行快速腳本來獲取屏幕大小，然後將從db params字段傳遞的圖像大小參數更改爲您的代碼，以根據屏幕反映所需的大小。

如果您沒有編寫幻燈片代碼或不想破解它，我的建議是創建一個Joomla內容插件，每當Joomla呈現一個新頁面時，您的插件將檢查兩件事情，是加載的任何幻燈片模塊和屏幕的大小。這種方式還具有額外的好處，即允許您將自適應設計所需的任何新模塊或組件特定佈局/設計更改合併到一起，而無需重新發明車輪。

讓我知道這是怎麼回事，這實際上與我剛剛遞交給我們公司Joomla產品組合的一個項目相同，並且也將處理這個問題。

來源

2012-08-14 18:18:27

我已經看到了這一點，我不打算使用CSS和@Media來解決我的導航問題，因爲Foundation已經在整個網站中爲我的導航和整體樣式使用了媒體樣式。 – Vyache 2012-08-14 18:27:03

我不知道我是否使用標題，是否會讓我的屏幕大小？ – Vyache 2012-08-20 17:29:31

如何使用Joomla和Ajax檢測屏幕大小來適應我的導航？

回答

相關問題