Question

我想创建一个移动网站，我正在尝试让我的导航适应屏幕尺寸。导航的HTML结构将发生变化，我知道我可以使用CSS和@MEDIA调用。但是，它不适用于我的情况，因为我使用Foundation from ZURB框架，我需要更改元素，从UL到DD或DL等。

我查看了几个来源，我发现因为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中的东西以使其工作，但我想要一种更干净和优雅的方式。

如果有人有任何代码示例。请发帖。

Answer 1

见以下网址

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

或读它

我认为你可能会变得更加努力。通常我建议使用CSS和@media，它仍然可以实现，允许使用现有标准加载任何自适应样式，而无需编写任何新代码。然而，模块图像尺寸的调整是你的“问题”的关键所在;这将需要一些手工制作的善良。

您是否编写过幻灯片模块代码？您可以轻松运行快速脚本来获取屏幕大小，然后将从db params字段传递的图像大小参数更改为您的代码，以根据屏幕反映所需的大小。

如果你没有写幻灯片代码或者不想破解它，我的建议是创建一个Joomla内容插件，每次Joomla渲染一个新页面时，你的插件会检查两件事，是任何加载的幻灯片模块和屏幕大小。这种方式还有一个额外的好处，即允许您合并自适应设计所需的任何新模块或组件特定的布局/设计更改，而无需重新发明轮子。

让我知道这是怎么回事，这实际上与我刚刚为我们的公司Joomla投资组合提交的项目相同，并且也将解决这个问题。

Answer 2

解决方案是通过浏览器识别：

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。

如何使用Joomla和Ajax检测屏幕大小来调整我的导航？

2 个答案: