ojo - Obteniendo el menú de Zend_Navigation para que funcione con el Fisheye de jQuery

ojo de pez app

Question

Estoy usando Zend_Navigation (adición dulce al marco, por cierto) para construir mi menú, después de lo cual debe ser presentado en la página (evidentemente). Primero configuré el contenedor en algún lugar del controlador:

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

Luego, en el diseño, se representa así:

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

que funciona a la perfección Ahora: quiero que el menú se represente de forma un poco diferente. La página que estoy construyendo usa jQuery Fisheye-plugin para construir un menú Dock similar a Mac. Sin embargo, este complemento necesita un marcado específico ...

En realidad, toma una lista de <a> elementos que contienen tanto un <img> (para el icono) como un <span> (para la información sobre herramientas). El asistente de vista de menú estándar representa todo dentro de una lista desordenada (lógicamente), con el parámetro ''label'' como el texto del enlace.

Parece que el contenido pasado al parámetro ''label'' se escapó antes de la representación, por lo que insertar el html allí no me servirá de nada. Además, el Ojo de Pez por lo general no parece tomar sus elementos contenidos en una etiqueta <li> , con todo envuelto en <ul></ul> , sino solo una lista de un nivel de elementos <a> .

Estaba pensando en escribir un ayudante de visualización personalizado para el dock, que podría encargarse de insertar el <img> y el <span> , pero me está costando mucho conseguir un ayudante de visualización personalizado conectado al Navegador clase. Simplemente no puedo imaginar dónde colocarlo y de qué manera, a pesar de que todas mis otras clases personalizadas (modelos y demás) son cuidadosamente atendidas por el autocargador. Alguna idea sobre esto?

Por otra parte, incluso si puedo hacer que funcione este visualizador auxiliar, aún me queda la lista desordenada de HTML. Sé que también puedo perder esa usando el asistente de visualización personalizado, pero siempre he sido partidario de contener el contenido principal. Menús de navegación dentro de una lista, en aras de la semántica.

Si alguien puede ayudarme un poco, lo agradecería muchísimo. Si el Fisheye no está diseñado para funcionar con <ul> , sería una lástima ... ¿habría una buena razón para perder Zend_Navigation por completo en este caso?

Answer 1

Todavía no he visto el camino en términos de crear un renderizador personalizado. Esto es lo que terminé haciendo sin embargo:

Primero, en lugar de renderizar la llamada predeterminada del menú (), cree un parcial para renderizar en:

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

Luego (desde los documentos), puede crear un renderizado "personalizado" como ese:

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

Terminé haciendo lo que originalmente tenía (un menú con un nivel de submenús) con este 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>

Podrías simplemente cambiar el marcado en el parcial y agregar tus imágenes / íconos allí.

Answer 2

Lo sentimos, por el problema de formato en la publicación anterior

Para agregar su ayuda personalizada, haga lo siguiente, en su arranque:

protected function _initNavigation()
{
    $this->bootstrap(''view'');           // make sure we have a view
    $view = $this->getResource(''view'');     // get the view resource
    $config = new Zend_Config_Xml(APPLICATION_ROOT . ''/config/navigation.xml'',''nav'');
    $container = new Zend_Navigation($config);
    $view->navigation($container);

    // Tell Zend were it can find your custom helpers and what
    // the prefix is going to be.

   $view->addHelperPath(
          APPLICATION_ROOT . ''/library/MyApp/View/Helper/Navigation'',
          ''MyApp_View_Helper_''
          );

}

A continuación, cree su asistente de visualización personalizado y colóquelo en la ruta ''addHelperPath''. Dependiendo de lo que quieras hacer, necesitas implementar al menos tu propia función htmlify. Eche un vistazo a Zend / View / Help / Navigation / Menu.php como un ejemplo.

class MyApp_View_Helper_MyMenu extends Zend_View_Helper_Navigation_Menu
{
    public function myMenu(Zend_Navigation_Container $container = null)
    {
        if (null !== $container) {
            $this->setContainer($container);
        }
        return $this;
    }

    protected function htmlify(Zend_Navigation_Page $page ) 
    {
        ...
    }
}

A continuación, en su script phtml:

   <?php echo $this->navigation()->myMenu()->setMaxDepth(0); ?>

o solo

   <?php echo $this->navigation()->myMenu(); ?>

Ahora, si desea agregar sus propias propiedades personalizadas al HTML generado, puede agregarlas a su archivo de navegación ini o xml. Por ejemplo:

<home>
  <label>Home</label>
  <uri>/</uri>
  <img>
      <src>/images/MyIcon.gif</src>
  <img>
</home>

La etiqueta xml personalizada <img> se almacenará como una propiedad de la página de navegación y se puede buscar como:

foreach ($iterator as $page) {

    ...

    $properties = new Zend_Config($page->GetCustomProperties());
    $myPicture = $properties->img->src;

    ...
}

Espero que esto ayude. Peter