jquery - 让 Zend_Navigation 菜单与 jQuery 的 Fisheye 一起使用

Question

我正在使用 Zend_Navigation(框架的甜蜜补充，顺便说一句)来构建我的菜单，之后它应该在页面中呈现(不言而喻)。我首先将容器设置在 Controller 中的某个位置:

// $pages is the array containing all page information
$nav = new Zend_Navigation($pages);
$this->view->navigation($nav);

然后在布局中，渲染成这样:

echo $this->navigation()->menu();

效果很好。现在:我希望菜单的呈现方式略有不同。我正在构建的页面使用 jQuery Fisheye-plugin构建一个类似 Mac 的 Dock 菜单。但是，这个插件需要特定的标记...

实际上，它需要一个<a>的列表包含 <img> 的元素(对于图标)和 <span> (用于工具提示)。标准菜单 View 助手将所有内容呈现在无序列表中(逻辑上)，带有 'label'参数作为链接文本。

看来内容传递到了'label'参数在渲染之前被转义，因此在那里插入 html 对我没有任何好处。此外，鱼眼通常似乎不接受 <li> 中包含的项目。标签，整个内容包裹在 <ul></ul> 中，但只是 <a> 的一级列表元素。

我正在考虑为扩展坞编写一个自定义 View 助手，它将能够插入 <img>和 <span> ，但我很难将自定义 View 助手附加到导航类。我只是不知道将其放置在哪里以及以什么方式放置，即使我的所有其他自定义类(模型等)都由自动加载器精心处理。对此有什么想法吗？

话又说回来，即使我可以让这个 View 助手工作，我仍然留下 HTML 无序列表 - 我知道使用自定义 View 助手我也可能会丢失该列表，但我一直是它的粉丝出于语义考虑，在列表中包含主导航菜单。

如果有人能帮我一点忙，我将不胜感激。如果鱼眼不适合与<ul>一起使用是的，那太糟糕了……在这种情况下，有充分的理由完全失去 Zend_Navigation 吗？

Answer 1

我还没有看到制作自定义渲染器的方法。这就是我最终所做的:

首先，不渲染默认的 menu() 调用，而是创建一个要渲染的部分:

// menu.phtml is partial, cms is module
$partial = array('menu.phtml', 'cms');
$this->navigation()->menu()->setPartial($partial);
echo $this->navigation()->menu()->render();

然后(从文档中)，您可以创建一个“自定义”渲染，如下所示:

// -- inside menu.phtml
foreach ($this->container as $page) 
{
    // this just prints a "<a>" or "<span>" tag
    // depending on whether the page has a uri
    echo $this->menu()->htmlify($page), PHP_EOL;
}

我最终用这个脚本制作了我最初拥有的内容(带有一级子菜单的菜单):

// -- another menu.phtml
<ul class="navigation">

<?php

$html = array();

foreach ($this->container as $page) 
{
    $html[] = "<li>";
    $html[] = $this->menu()->htmlify($page) . PHP_EOL;

    if (!empty($page->pages))
    {
        $html[] = "<ul>";
        foreach ($page->pages as $subpage) 
        {
            $html[] = "<li>";
            if ($href = $subpage->getHref()) $html[] = "<a href=\"{$href}\">";
            else $html[] = "<span>";
            $html[] = "<img src=\"/ui/cms/img/icons/edit.png\" alt=\"\"/>";
            $html[] = $subpage->getLabel();
            if ($href) $html[] = "</a>";
            else $html[] = "</span>";            
            $html[] = "</li>";
        }
        $html[] = "</ul>";
    }

    $html[] = "</li>";
}

echo join(PHP_EOL, $html);

?>
</ul>

您只需更改部分中的标记并在其中添加图像/图标即可。