Ottenere menù Zend navigazione per lavorare con jQuery Fisheye

Question

Sto usando Zend_Navigation (dolce Oltre al quadro, btw) per costruire il mio menu, dopodiché si deve essere reso nella pagina (evidentemente). Ho messo il contenitore da qualche parte nel controller:

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

Poi, nel layout, è reso in questo modo:

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

che funziona perfettamente. Ora: voglio il menu per essere reso un po 'diverso. La pagina che sto edificio utilizza jQuery Fisheye-plugin per costruire un Mac-like dock-menu. Tuttavia, questo plugin ha bisogno di una marcatura specifica ...

In realtà, ci vuole una lista di elementi <a> contenenti sia uno <img> (l'icona) e una <span> (per il suggerimento). Lo standard Vista menu aiutante rende tutto all'interno di una lista non ordinata (logicamente), con il parametro 'label' come il testo del link.

Sembra che i contenuti passato al parametro 'label' è scappato prima del rendering, quindi inserire il codice HTML non ci mi farà nulla di buono. Inoltre, il Fisheye di solito non sembra a muovere i suoi elementi contenuti in un tag <li>, con l'intera cosa avvolta in <ul></ul>, ma solo una lista di un livello di elementi <a>.

Stavo pensando di scrivere un aiutante visualizzazione personalizzata per il dock, che sarebbe in grado di prendersi cura di inserire la <img> e la <span>, ma sto avendo un momento molto difficile ottenere un aiutante visualizzazione personalizzata collegata alla classe di navigazione . Non riesco proprio a capire da dove collocarlo e in che modo, anche se tutti i miei altri classi personalizzate (modelli e simili) sono dolcemente curati dal caricatore automatico. Tutte le idee su questo?

Poi di nuovo, anche se posso ottenere questo view helper per lavorare, sto ancora a sinistra con l'HTML lista non ordinata - So che posso perdere anche quello con l'helper visualizzazione personalizzata, ma io sono sempre stato un fan di contenere menu principali di navigazione all'interno di un elenco, per il bene della semantica.

Se qualcuno mi può aiutare un po ', mi piacerebbe molto grato. Se il Fisheye solo non è destinato a lavorare con <ul> di, che sarebbe troppo male ... ci sarebbe una buona ragione per perdere Zend_Navigation del tutto in questo caso?

Answer 1

Non ho ancora né in termini di rendere un renderer personalizzato visto il modo. Ecco quello che ho finito per fare però:

Per prima cosa, invece di rendere la chiamata menu di default (), creare un parziale rendere in:

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

Poi (dalla documentazione), è possibile creare una "custom" rendere in questo modo:

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

ho finito per fare quello che ho inizialmente avevo (un menu con un livello di sottomenu) con questo 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>

Si potrebbe semplicemente cambiare il markup nel parziale e aggiungere le immagini / icone lì.

Answer 2

Siamo spiacenti, per il rilascio di formattazione del post precedente

Per aggiungere il vostro aiuto personalizzato effettuare le seguenti operazioni, in bootstrap:

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_'
          );

}

Avanti creare il view helper personalizzato e metterlo nel percorso ‘addHelperPath’. A seconda di cosa si vuole fare è necessario implementare almeno la propria funzione htmlify. Date un'occhiata a Zend / Vista / Aiuto / navigazione / menu.php come esempio.

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 ) 
    {
        ...
    }
}

Successivamente, nello script phtml:

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

o semplicemente

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

Ora, se si desidera aggiungere le proprie proprietà personalizzate per il codice HTML generato è possibile aggiungere al vostro file ini o xml di navigazione. Ad esempio:

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

Il <img> tag XML personalizzato verrà memorizzato come una proprietà della pagina di navigazione e può essere recuperato come:

foreach ($iterator as $page) {

    ...

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

    ...
}

Spero che questo aiuti. Peter