如何使用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检测屏幕大小来适应我的导航？

回答

相关问题