Sommaire déroulant

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 363 fois - Téléchargée 17 fois

Contenu du snippet

Sommaire déroulant (xml+xslt+css+javascript+php5)

J'ai été surpris de ne pas trouver ce type de code, mais peut-être n'ai-je pas cherché au bon endroit?
La question se pose en effet de la présence de ce code ici, vu qu'il ne comporte que 3 lignes de php "véritable"; cependant, à force de lire les posts, j'ai compris que le traitement des fichiers au format xml constituait une préoccupation majeure de la plupart d'entre vous.
A vous de juger.
Quelques explications :
L'idée même de sommaire déroulant suppose la différenciation des chapitres en 2 catégories :
- les chapitres de type "branche" (assimilables aux "dossiers" d'une arborescence), d'expression xpath :
//chapitre[chapitre]
et qui contiennent d'autres chapitres.
- les chapitres de type "feuille" (assimilables aux "fichiers" d'une arborescence), d'expression xpath :
//chapitre[not(chapitre)]
et qui contiennent le texte "utile" du document.
- Question : et si un chapitre de type "branche", en plus de contenir des chapitres, contient aussi du texte?
- Réponse : son texte sera ignoré.

Source / Exemple :


<?php
header('Content-type: text/html; charset=iso-8859-1');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
?>

<html>

<!-- 
 - Date de création : 16/08/2007
 - Objet : sommaire déroulant (xml+xslt+css+javascript+php5)
 - Auteur : opossum_farceur
-->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content=0> 
<title></title>

<style type="text/css">
   body {background-color:white; font-family:Arial;}

   TABLE.table1 {width:100%; border:1px solid black;}
   TH.th1 {background-color:#EEEEEE; border:1px solid black; padding:20px; font-size:32px;}
   TD.td1 {background-color:#EEEEEE; border:1px solid black; padding:20px; font-size:14px; text-align:justify;}

   TABLE.table2 {width:100%; border-style:none;}
   TD.left {border-style:none; padding:0px; font-size:18px; color:blue;}
   TD.right {border-style:none; padding:0px; text-align:right;}

   SMALL {font-size:5px;}  /* pour gérer les espaces entre les "icônes" */

   UL {margin-left:20px; padding-left:0px;}
   UL.root {margin-left:0px;}
   UL.off {display:none;}
   UL.on {}
   LI.nomarker {list-style-type:none;}

   A {color:blue;}
   A.summary {text-decoration:none; font-size:18px;}
   A.symbol {font-size:22px;}
   A:hover {color:red;}
                           /* largeur du span pas traitée avec FF, pb aussi si le lien est souligné */
   SPAN.sign {font-family:Courier New; font-size:20px; font-weight:bold; color:magenta; padding-right:10px;}
   SPAN.number {color:black; padding-right:10px;}
</style>

<script language="Javascript">

/////////////////////////////////////////////////////////////////////////////////////////////////////////

function change(tag,id)
{
   var ul=document.getElementById(id),s=tag.innerHTML;

   if (ul.className=='off') {
      ul.className='on';
      tag.innerHTML=s.replace(/[+]/,'-');       // seul le premier caractère trouvé est remplacé
   }
   else {
      ul.className='off';
      tag.innerHTML=s.replace(/[-]/,'+');
   }
   tag.style.color='purple';
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////

</script>
</head>

<body>
<?php

$xml=<<<XML
<document titre="--- &#160; Ma petite DEMO &#160; ---">
   <chapitre titre="Chapitre un">
      <chapitre titre="Chapitre un/un">
         <P style="font-size:60px; color:teal;">
            Bonjour,<BR/>ceci est le texte<BR/>du Chapitre un/un<BR/><BR/>
         </P>
      </chapitre>
      <chapitre titre="Chapitre un/deux">
         <P style="font-size:60px; color:silver;">
            Bonjour,<BR/>ceci est le texte<BR/>du Chapitre un/deux<BR/><BR/>
         </P>
      </chapitre>
      <chapitre titre="Chapitre un/trois">
         <chapitre titre="Chapitre un/trois/un">
            <P style="font-size:60px; color:olive;">
               Bonjour,<BR/>ceci est le texte<BR/>du Chapitre un/trois/un<BR/><BR/>
            </P>
         </chapitre>
      </chapitre>
   </chapitre>
   <chapitre titre="Chapitre deux">
      <chapitre titre="Chapitre deux/un">
         <P style="font-size:60px; color:navy;">
            Bonjour,<BR/>ceci est le texte<BR/>du Chapitre deux/un<BR/><BR/>
         </P>
      </chapitre>
      <chapitre titre="Chapitre deux/deux">
         <P style="font-size:60px; color:maroon;">
            Bonjour,<BR/>ceci est le texte<BR/>du Chapitre deux/deux<BR/><BR/>
         </P>
      </chapitre>
   </chapitre>
</document> 
XML;

$xsl='
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output encoding="ISO-8859-1"/>

<xsl:template match="document">
   <TABLE class="table1">
      <TR><TH class="th1">                               <!-- titre du document -->
         <xsl:value-of select="@titre"/>
      </TH></TR>

      <TR><TD class="td1">                               <!-- traitement du sommaire : parcours récursif -->
         <UL class="root">
            <xsl:apply-templates select="chapitre"/>
         </UL>
      </TD></TR>

      <xsl:for-each select="//chapitre[not(chapitre)]">  <!-- traitement du "contenu" : parcours itératif -->
         <xsl:variable name="pos" select="position()"/>
         <TR><TD class="td1">
            <TABLE class="table2"><TR>
               <TD class="left" id="{$pos}">             <!-- à gauche, le titre du chapitre -->
                  <SPAN class="number"><xsl:number level="multiple"/></SPAN>
                  <xsl:value-of select="@titre"/>
               </TD>
               <TD class="right"><FONT face="Webdings">  <!-- à droite, le système de "navigation" -->
                  <A class="symbol" href="#top" title="top">9</A>
                  <xsl:if test="$pos > 1">
                     <SMALL>&#160;</SMALL><A class="symbol" href="#{$pos - 1}" title="précédant">3</A>
                  </xsl:if> 
                  <xsl:if test="$pos < last()">       <!-- espaces autour du "+" nécessaires -->
                     <SMALL>&#160;</SMALL><A class="symbol" href="#{$pos + 1}" title="suivant">4</A>
                  </xsl:if> 
               </FONT></TD>
            </TR></TABLE>

            <xsl:copy-of select="."/>                    <!-- copie du "contenu" sans traitement particulier -->
         </TD></TR>
      </xsl:for-each>

   </TABLE>
</xsl:template>

<xsl:template match="chapitre">
   <xsl:choose>
      <xsl:when test="./chapitre">                       <!-- c`est donc une "branche"! -->
         <xsl:variable name="idvalue" select="generate-id()"/>
         <LI class="nomarker">
            <A class="summary" href="#" onClick="change(this,\'{$idvalue}\');">
               <SPAN class="sign">+</SPAN>
               <SPAN class="number"><xsl:number level="multiple"/></SPAN>
               <U><xsl:value-of select="@titre"/></U>
            </A>
            <UL id="{$idvalue}" class="off">             <!-- identifiant fourni par "generate-id()" -->
                <xsl:apply-templates select="chapitre"/>
            </UL>
         </LI>
      </xsl:when>
      <xsl:otherwise>                                    <!-- c`est donc une "feuille"! -->
         <LI class="nomarker">
            <A class="summary" href="#{count(preceding::chapitre[not(chapitre)]) + 1}" onClick="this.style.color=\'purple\';">
               <SPAN class="sign">&#160;</SPAN>
               <SPAN class="number"><xsl:number level="multiple"/></SPAN>
               <U><xsl:value-of select="@titre"/></U>
            </A>
         </LI>
      </xsl:otherwise> 
   </xsl:choose>
</xsl:template>

</xsl:stylesheet>
';

$proc=new XSLTProcessor;
$proc->importStyleSheet(DOMDocument::loadXML(utf8_encode($xsl)));
echo $proc->transformToXML(DOMDocument::loadXML(utf8_encode($xml)));
?>
</body></html>

A voir également

Ajouter un commentaire

Commentaires

opossum_farceur
Messages postés
147
Date d'inscription
lundi 16 août 2004
Statut
Membre
Dernière intervention
14 novembre 2009

Encore sur les navigateurs, sachez que la transformation XSLT peut s'effectuer avec JavaScript :
http://xml.developpez.com/sources/?page=transfo_param
Je l'ai testé, çà fonctionne impec.
kishkaya
Messages postés
365
Date d'inscription
samedi 26 juin 2004
Statut
Membre
Dernière intervention
17 avril 2008

Morale : aux prochaines élections votez W3C.
malalam
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
21
Du pain rassi, ouais...
Faire un site qui respecte les normes, l'accessibilité, relève de la gageure. Ca n'a jamais changé, je pense que ça ne changera jamais. Et c'est pas ce que j'aime le plus faire dans le web...des pieds et des mains pour que mon site puisse être vu par tout le monde...alors que ce devrait couler de source.
Je suis bien d'accord.
MAIS...si on combat ces comportements : FAI, sociétés créant des navigateurs fermés...avec des sites respectant au plus les normes, sans tenir compte des mégas fonctionnalités propriétaires qu'ils ajoutent à leur produit...ça les fera peut-être réflêchir-ou plier- un jour.
opossum_farceur
Messages postés
147
Date d'inscription
lundi 16 août 2004
Statut
Membre
Dernière intervention
14 novembre 2009

Merci MALALAM pour ces précisions, ceux qui verront "934" (ou autre chose encore!) s'afficher sur leur page sauront donc à quoi s'en tenir. Pourtant mon idée partait d'un bon sentiment, à savoir
simplifier les choses à l'extrème en se débarrassant des .gif et autres .png et caser tout le code dans la zone "source" de la page sans avoir à faire de .zip, mais bon...
Rendre une application compatible avec tous les OS et tous les navigateurs (sans parler des diverses définitions d'écran et des spécificités concernant les non-voyants) est un challenge et
constitue un vrai travail, au sens ou un travail est censé être fastidieux et répétitif.
Dire que les FAI se mettent depuis peu à développer leur propre navigateur et qu'ils font évidemment en sorte qu'il soit utilisé en priorité par le client lambda, le développeur "web" a encore du pain sur la planche.
malalam
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
21
Et pour coder correctement, tu as peu de latitudes là-dessus : utilises des images (avec un attribut alt pour le contenu alternatif hein ;-) ), ou bien :


Toutes les entités html ici :
http://www.w3.org/TR/REC-html40/sgml/entities.html#h-24.2

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.