Copier le template d'affichage table.tpl

Date de publication: le dimanche 20 mars 2011 à 00h04
Dernière modification: par Pascal BOYER le lundi 21 mars 2011 à 18h00

Par défaut, le template utilisé pour afficher un tableau créé à partir de l'éditeur Online Editor est design/standard/templates/content/datatype/view/ezxmltags/table.tpl

Il convient donc de faire préalablement à toute modification de ce template une copie de celui-ci dans le design lié au siteaccess public afin d'obtenir ceci:

• design/«plain_site»/templates/content/datatype/view/ezxmltags/table.tpl

Modifiez éventuellement le nom plain_site afin qu'il corresponde au nom de votre design public.

Définir l'affichage spécifique à la classe tableau_1_accordion

C'est dans le template table.tpl que l'on va ajouter le code permettant d'obtenir l'effet accordion. 

C'est également dans ce template que l'on récupère la classe CSS tableau_1_accordion par le biais du contenu de la variable $classification.

Voici le code final du template:

{* DO NOT EDIT THIS FILE! Use an override template instead. *}
{set $classification = cond( and(is_set( $align ), $align ), concat( $classification, ' object-', $align ), $classification )}
 
<-- NOUVEAU CODE -->
{if eq($classification,"tableau_1_accordion")}
   <div class="accordion">
      {literal}<script type="text/javascript" src="/design/plain_site/javascript/accordion/accordion.js" language="JavaScript"></script>{/literal}
      <ul id="vertical" class="simple vertical">
         <li>
            <h3 class="tableau">Afficher le tableau<span>+</span></h3>
            <div  class="collapse tableau">
               <div class="collapse-container">
                  <-- CODE EXISTANT REPRIS À L'IDENTIQUE -->
                  <table{if $classification} class="{$classification|wash}"{else} class="renderedtable"{/if}{if ne($border|trim,'')} border="{$border}"{/if} cellpadding="{first_set($cellpadding, '2')}" cellspacing="0"{if ne($width|trim,'')} width="{$width}"{/if}{if and(is_set( $summary ), $summary)} summary="{$summary|wash}"{/if}{if and(is_set( $title ), $title)} title="{$title|wash}"{/if}>
                     {if and(is_set( $caption ), $caption)}<caption>{$caption|wash}</caption>{/if}
                     {$rows}
                  </table>
                  <-- FIN CODE EXISTANT REPRIS À L'IDENTIQUE -->
               </div>
            </div>
         </li>
      </ul>
   </div>
{else}
<-- FIN NOUVEAU CODE -->
   <table{if $classification} class="{$classification|wash}"{else} class="renderedtable"{/if}{if ne($border|trim,'')} border="{$border}"{/if} cellpadding="{first_set($cellpadding, '2')}" cellspacing="0"{if ne($width|trim,'')} width="{$width}"{/if}{if and(is_set( $summary ), $summary)} summary="{$summary|wash}"{/if}{if and(is_set( $title ), $title)} title="{$title|wash}"{/if}>
      {if and(is_set( $caption ), $caption)}<caption>{$caption|wash}</caption>{/if}
      {$rows}
   </table>
<-- NOUVEAU CODE -->
{/if}
<-- FIN NOUVEAU CODE -->

:
Il est évident que la syntaxe du code dépend du framework que vous utilisez.
Je rappelle qu'il s'agit ici de la syntaxe associée au framework Mootools.

:
Dans cet exemple, on insère le javascript accordion.js directement dans le template. Cette pratique ne convient que si l'on ne crée qu'un seul tableau tableau_1_accordion par article.
Dans le cas contraire, le javascript devra être importé directement «au niveau» du template pagelayout.tpl

Commentaires