使 Zend_Navigation 菜单与 jQuery 的鱼眼一起使用 [英] Getting Zend_Navigation menu to work with jQuery's Fisheye

问题描述

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

I'm using Zend_Navigation (sweet addition to the framework, btw) to build my menu, after which it should be rendered in the page (self-evidently). I first set the container somewhere in the controller:

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

然后，在布局中，它是这样呈现的:

Then, in the layout, it is rendered like this:

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

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

which works perfectly. Now: I want the menu to be rendered a little differently. The page I'm building uses the jQuery Fisheye-plugin to build a Mac-like Dock-menu. However, this plugin needs a specific markup...

实际上，它需要一个 元素列表，其中包含一个 (用于图标)和一个 ;(用于工具提示).标准菜单视图助手呈现无序列表中的所有内容(逻辑上)，使用 'label' 参数作为链接文本.

Actually, it takes a list of <a> elements containing both an <img> (for the icon) and a <span> (for the tooltip). The standard Menu view helper renders everything inside an unordered list (logically), with the 'label' parameter as the link text.

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

It seems that content passed to the 'label' parameter is escaped before rendering, so inserting the html there won't do me any good. Additionally, the Fisheye usually doesn't seem to take its items contained in a <li> tag, with the entire thing wrapped in <ul></ul>, but just a one-level list of <a> elements.

我正在考虑为 Dock 编写一个自定义视图助手，它可以处理插入 和 ，但我很难将自定义视图助手附加到 Navigation 类.我就是不知道把它放在哪里以及以什么方式放置，即使我所有的其他自定义类(模型等)都被自动加载器很好地处理了.对此有什么想法吗?

I was thinking about writing a custom view helper for the dock, which would be able to take care of inserting the <img> and the <span>, but I'm having a very hard time getting a custom view helper attached to the Navigation class. I just can't figure out where to place it and in what way, even though all my other custom classes (models and such) are sweetly taken care of by the autoloader. Any ideas on this?

再说一次，即使我可以让这个视图助手工作，我仍然留下 HTML 无序列表 - 我知道我也可以使用自定义视图助手丢失那个列表，但我一直是它的粉丝出于语义考虑，将主导航菜单包含在列表中.

Then again, even if I can get this view helper to work, I'm still left with the HTML unordered list - I know I can lose that one too using the custom view helper, but I've always been a fan of containing main navigation menus inside a list, for the sake of semantics.

如果有人能帮我一点忙，我将不胜感激.如果 Fisheye 不打算与 <ul> 一起使用，那就太糟糕了......在这种情况下，是否有充分的理由完全失去 Zend_Navigation?

If anyone can help me out a little, I'd greatly appreciate it. If the Fisheye just isn't meant to work with <ul>'s, that'd be too bad... would there be a good reason for losing Zend_Navigation altogether in this case?

推荐答案

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

I haven't seen the way yet either in terms of making a custom renderer. Here's what I ended up doing though:

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

First, instead of rendering the default menu() call, create a partial to render into:

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

然后(来自文档)，您可以像这样创建自定义"渲染:

Then (from the docs), you can create a "custom" render like so:

// -- 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;
}

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

I ended up making what I originally had (a menu with one level of submenus) with this script:

// -- 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>

您可以更改部分中的标记并在那里添加您的图像/图标.

You could just change the markup in the partial and add your images/icons there.

这篇关于使 Zend_Navigation 菜单与 jQuery 的鱼眼一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！