Criando uma aparência tree-style / A página de Links / Construindo um site com o eZ Publish / Documentação / Comunidade eZ Publish Brasil

O que nós fizemos até agora foi criar uma lista dinâmica. Esta lista pode ser facilmente alterada para termos uma aparência tree-style.

Faça o download das imagens abaixo e as coloque dentro do diretório design/docedesejo/images :

O ícone pasta_aberta.png será mostrado em frente à pasta que for acessada. O ícone pasta_fechada.png será mostrado em frente às demais pastas que não foram acessadas. O link.png será mostrado em frente aos links. Para atingir este resultado, devemos alterar pouca coisa no template links_tree_menu.tpl . O código a seguir é o resultado final de como o arquivo links_tree_menu.tpl deve ficar. Compare o conteúdo do arquivo links_tree_menu.tpl já existente com o código abaixo e faça as mudanças necessárias. Se preferir, copie e cole o código abaixo substituindo todo código já existente no arquivo links_tree_menu.tpl .

{section loop=fetch(content, list, hash( parent_node_id, _ID_,
                             class_filter_type, include,
                             class_filter_array, array( 'folder' ),
                             sort_by, $node.sort_array ) ) }

 {section show=eq( $:item.node_id, $node.node_id )}
   <b>
     <a href={$:item.url_alias|ezurl}>
       <img src={"pasta_aberta.png"|ezimage} />{$:item.name|wash}
     </a>
   </b>
   <br/>
   {section loop=fetch( content, list, hash( parent_node_id, $:item.node_id,
                                 class_filter_type, include,
                                 class_filter_array, array( 'link' ),
                                 sort_by, $:item.sort_array ) ) }

      &nbsp<a href={$:item.object.data_map.location.content} target="_blank">
        <img src={"link.png"|ezimage} />{$:item.name}
      </a>
      <br />
   {/section}
 {section-else}
   <b>
     <a href={$:item.url_alias|ezurl}>
       <img src={"pasta_fechada.png"|ezimage} />{$:item.name|wash}
     </a>
   </b>
   <br/>
 {/section}
{/section}

Caso necessário, não esqueça de alterar o _ID_ do código acima para o número ID da pasta Links .

Neste ponto, quando a pasta Educacionais for clicada, o browser deve mostrar uma imagem semelhante à figura abaixo:

docedesejo_links_05

É isso! Nós criamos um simples tree-style menu que pode ser facilmente alterado para funcionar com outro tipo de contexto.

Criando uma aparência tree-style

Comentários