[FR] Modèle export html

mistervince · Post by **mistervince** » 2005-05-03 12:49:57

Salut,

Voilà un modèle d'exportation au format html.
Il donne la liste des films avec des tris par genre, type de support ou pays.
Les détails de chaque films sont accessibles par simple clic.

Il marche sous IE mais pas sous Firefox, je sais pas quoi changer pour la compatibilité

. Si quelqu'un connait, est-ce qu'il peut arranger ça ? ;-)
Voilà le code :

Code: Select all

<html>
<head>
<!--
Modèle adapté par Vince
Liste des films avec différents tris (genre, type de support, pays)
Détails de chaque film disponible par simple clic
-->
<style type="text/css">
    /* style de la page */
    body {
      background: #DFDEE2;
      color: black;
    }

    /* style des menus */
    .menu {
        clear: both;       /* pour obliger le retour à la ligne des menus */
        margin-top: 5px;
        width: 200px;
        height: 20px;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        cursor: hand;
        background: #9D9AA5;
    }
    
    /* style des menus ouverts  */
    #smenu1, #smenu2, #smenu3, #smenu4 {
        float: left;
        display: none;       /* par défaut, les sous-menus ne seront pas affichés */
        font-size: 8px;
        padding: 5px 0 5px 0;
        width: 200px;
    }

    /* style des sous menus */
    .sousmenu {
       font-size: 12px;
       cursor: hand;
       color: black;
       text-decoration: none;
   }

   /* style des sous menus activé par la souris */
   .sousmenu-over {
      font-size: 12px;
       cursor: hand;
       color: white;
       text-decoration: underline overline;
   }
   
   /* style des sous menus déjà visités */
   .sousmenu-done {
      font-size: 12px;
       cursor: hand;
       color: #595663;
       text-decoration: none;
   }
   
   /* style des flèches d'ouverture des menus */
   .symboleOuv{
        font-size: 14px;
        color: black;
   }

   /* style des flèches de fermeture des menus */
   .symboleFer {
        font-size: 11px;
        color: black;
   }
   
   ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 10px;
        font-family: verdana, arial, sans-serif;
        font-weight: normal;
   }

   /* style des titres dans la liste */
   .tabTitre {
       cursor:hand;
   }

   /* style des infos ajoutées au bout des titres dans la liste */
   .info {
        font-size:10px;
        text-align:center;
   }
   
   a {
      color: black;
   }

</style>
<script language="javaScript">
/* fonction pour ouvrir-fermer les menus */
function clicMenu(id) {
  /* booléen reconnaissant le navigateur */
  isIE = (document.all)
  isNN6 = (!isIE) && (document.getElementById)

  /* compatibilité : l'objet menu est détecté selon le navigateur */
  if (isIE) menu = document.all[id];
  if (isNN6) menu = document.getElementById(id);

  if (menu.style.display == "") menu.style.display = "none";

  /* on ouvre ou ferme */
  if (menu.style.display == "none"){
    /* cas ou le tableau est caché */
    menu.style.display = "block";
    changeTitre(id,1);
  } else {
    /* on le cache */
    menu.style.display = "none";
    changeTitre(id,0);
   }
}

 /* change le sens des flèches dans les menus */
function changeTitre(id, option){
    var t = "";
    switch(id){
      case 'smenu2': if(option==1)
	                 t = "<span class='symboleFer'>Λ</span>  "+menus[1]+"  <span class='symboleFer'>Λ</span>";
                      else
		               t = "<span class='symboleOuv'>ν</span>  "+menus[1]+"  <span class='symboleOuv'>ν</span>";
	                 document.all.menu2.innerHTML = t;
	                 break;
      case 'smenu3': if(option==1)
	                 t = "<span class='symboleFer'>Λ</span>  "+menus[2]+"  <span class='symboleFer'>Λ</span>";
                      else
		               t = "<span class='symboleOuv'>ν</span>  "+menus[2]+"  <span class='symboleOuv'>ν</span>";
	                 document.all.menu3.innerHTML = t;
	                 break;
      case 'smenu4': if(option==1)
	                 t = "<span class='symboleFer'>Λ</span>  "+menus[3]+"  <span class='symboleFer'>Λ</span>";
                      else
		               t = "<span class='symboleOuv'>ν</span>  "+menus[3]+"  <span class='symboleOuv'>ν</span>";
	                 document.all.menu4.innerHTML = t;
	                 break;
    }
}

/*************************************************************/
   /* variables utilisées */
   var menus = new Array(5);    // tableau des titres des menus
   var movies = new Array();    // tableau des films
   var category  = "";          // Current category
   var movie = null;            // Current movie
   var categoryButton = null;   // Active category button
   var index = 0;               // Current movie number in this category
   var isReady = true;         // Is ready for input from user
   var tabCat = new Array();   // tableau des catégories
   var compCat = 0;              // nombre de catégories
   var tabSup = new Array();      // tableau des supports
   var compSup = 0;                // nombre de supports
   var tabPays = new Array();     // tableau des pays
   var compPays = 0;            // nombre de pays
   var catLiens;              // tableau pour les liens
   var supLiens;              // tableau pour les liens
   var paysLiens;             //tableau pour les liens

   /*
      création des menus
      création des catégories
   */
   function init() {
      var elements = document.body.getElementsByTagName("div");   

      menus[0] = "Liste complète";
      menus[1] = "Tri par genre";
      menus[2] = "Tri par support";
      menus[3] = "Tri par pays";

      movies[menus[0]] = new Array();
      createMenu(menus[0]);
      
      /* initialisation des menus */
     	document.all.menu2.innerHTML = "<span class='symboleOuv'>ν</span>  "+menus[1]+"  <span class='symboleOuv'>ν</span>";
      document.all.menu3.innerHTML = "<span class='symboleOuv'>ν</span>  "+menus[2]+"  <span class='symboleOuv'>ν</span>";
      document.all.menu4.innerHTML = "<span class='symboleOuv'>ν</span>  "+menus[3]+"  <span class='symboleOuv'>ν</span>";
      
      for (var i = 0; i < elements.length; i++) {
         /* regroupement des films par genre */
         category = elements[i].category;

         if (category != null && category != "") {
            catArray = movies[category];
            if (catArray == null) {
               catArray = new Array();
               movies[category] = catArray;
               catArray[0] = elements[i];
               tabCat[i] = category;
               compCat++;
            }
            else {
               catArray[catArray.length] = elements[i];
            }
            movies[menus[0]][movies[menus[0]].length] = elements[i];
         }

         /* regroupement des films par type de support */
         support = elements[i].support;

         if (support != null && support != "") {
            supArray = movies[support];
            if (supArray == null) {
               supArray = new Array();
               movies[support] = supArray;
               supArray[0] = elements[i];
               tabSup[i] = support;
               compSup++;
            }
            else {
               supArray[supArray.length] = elements[i];
            }
         }

         /* regroupement des films par pays */
         pays = elements[i].pays;

         if (pays != null && pays != "") {
            paysArray = movies[pays];
            if (paysArray == null) {
               paysArray = new Array();
               movies[pays] = paysArray;
               paysArray[0] = elements[i];
               tabPays[i] = pays;
               compPays++;
            }
            else {
               paysArray[paysArray.length] = elements[i];
            }
         }

      }

      /* tri des films pour chaque regroupement */
      tabCat = tabCat.sort();
      tabSup = tabSup.sort();
      tabPays = tabPays.sort();

       /* tableau pour les liens */
       catLiens = new Array(compCat);
       supLiens = new Array(compSup);
       paysLiens = new Array(compPays);

       for (var d=0 ; d<compCat ; d++)
            catLiens[tabCat[d]] = 0;
       for (var d=0 ; d<compSup ; d++)
            supLiens[tabSup[d]] = 0;
       for (var d=0 ; d<compPays ; d++)
            paysLiens[tabPays[d]] = 0;
      
      
      for(var t=0 ; t<compCat ; t++)
          createCategory(tabCat[t],movies[tabCat[t]].length);
      for(var t=0 ; t<compSup ; t++)
          createSupport(tabSup[t],movies[tabSup[t]].length);
      for(var t=0 ; t<compPays ; t++)
          createPays(tabPays[t],movies[tabPays[t]].length);

      category = menus[0];

      document.all.tabSelection.innerHTML = "<table width='100%' border='0'>$$ITEM_BEGIN<tr><td><span  class='tabTitre' onClick='ouvreFenetre($$ITEM_NUMBER-1);'>$$ITEM_TRANSLATEDTITLE</span><span style='width:50pt'></span><span class='info'>($$ITEM_DIRECTOR)</span></td></tr>$$ITEM_END</table>";
   }
  
   /* fonction de création du menu liste complète */
   function createMenu(name) {
      html = "<span class='menu' onclick='showCategorie(0,\"" + name + "\")'>" + name + "</span>";
      document.all.menu1.innerHTML += html;
   }
   
   /* fonction création du menu par genre */
   function createCategory(name, nb) {
      html = "<span class='sousmenu' id='"+name+"' onclick='change(this,3,id,1);showCategorie(1,\"" + name + "\");' onmouseover='change(this,1,id,1);' onmouseout='change(this,2,id,1);'>" + name + "<span style='width:30pt;text-align:right;font-size:8pt;'> ("+nb+")</span></span><br>";
      document.all.categoryDiv.innerHTML += html;
   }
   
   /* fonction création du menu par type de support */
   function createSupport(name, nb) {
      html = "<span class='sousmenu' id='"+name+"' onclick='change(this,3,id,2);showCategorie(2,\"" + name + "\");' onmouseover='change(this,1,id,2);' onmouseout='change(this,2,id,2);'>" + name + "<span style='width:30pt;text-align:right;font-size:8pt;'> ("+nb+")</span></span><br>";
      document.all.supportDiv.innerHTML += html;
   }

   /* fonction création du menu par pays */
   function createPays(name, nb) {
      html = "<span class='sousmenu' id='"+name+"' onclick='change(this,3,id,3);showCategorie(0,\"" + name + "\");' onmouseover='change(this,1,id,3);' onmouseout='change(this,2,id,3);'>" + name + "<span style='width:30pt;text-align:right;font-size:8pt;'> ("+nb+")</span></span><br>";
      document.all.paysDiv.innerHTML += html;
   }

   /* fonction de changement du style des sous menus */
   function change(menu, option, id, type){
    switch(option){
      case 1 : menu.className='sousmenu-over';
               break;
  	  case 2 : switch(type) {
  	             case 1 : if (catLiens[id] == 0)
                            menu.className='sousmenu';
                          else menu.className='sousmenu-done';
                          break;
                case 2 : if (supLiens[id] == 0)
                            menu.className='sousmenu';
                         else menu.className='sousmenu-done';
                         break;
                case 3 : if (paysLiens[id] == 0)
                            menu.className='sousmenu';
                         else menu.className='sousmenu-done';
                         break;
                }
                break
  	  case 3 : switch(type) {
  	               case 1 : catLiens[id] = 1; break;
  	               case 2 : supLiens[id] = 1; break;
                   case 3 : paysLiens[id] = 1; break;
               }
               menu.className='sousmenu-done';
               break;
 	  }
  }

  /* passe au film suivant dans la liste en cours */
  function next() {
      if (!isReady) return;
      index++;
      if (index >= movies[category].length)
          index = 0;
      ouvreFenetre(index);
  }
   
  /* passe au film précédent dans la liste en cours */
  function prev() {
      if (!isReady) return;
      index--;
      if (index < 0)
           index = movies[category].length - 1;
      ouvreFenetre(index);
  }

  /* affiche la liste des films selon le tri choisi */
  function showCategorie(option,name) {
      if (!isReady) return;
      category = name;
      index = 0;
      
      var films = "<table width='100%' border='0'>";
      for(var h=0 ; h < movies[name].length ; h++){;
        var f = movies[name][h];
        var titre = f.titre;
        var num = f.nb;
        var detail;
        
        switch(option){
          case 0 : detail = "("+f.real+")";break;
          case 1 : detail = "("+f.support+")";break
          case 2 : detail = "("+f.category+")";break
        }

        films += "<tr><td><span id='"+h+"'  class='tabTitre' onClick='ouvreFenetre(id);'>"+titre+"</span><span style='width:50pt'></span><span class='info'>"+detail+"</span></td></tr>";
      }
      document.all.tabSelection.innerHTML = films+"</table>";
  }

  /* affiche les détails du film sélectionné dans une fenêtre de type popup */
  function ouvreFenetre(niv) {
    index = eval(niv);
    var movie = movies[category][niv];
    var rang = index+1;
    var largeur=700;
    var hauteur=600;
    var haut=(screen.height-hauteur)/2;
    var gauche=(screen.width-largeur)/2;

    fenetre = window.open("", "details", "top="+haut+", left="+gauche+", width="+largeur+", height="+hauteur+", scrollbars=yes, resizable=yes");
    fenetre.focus();
    fenetre.document.write("<html><head><title>"+movie.titre+"</title>");
    fenetre.document.write("<style type='text/css'>");
    fenetre.document.write("body {background: #DFDEE2; color: black; }");
    fenetre.document.write(".button {      /* Next / Prev buttons */");
    fenetre.document.write("height: 15px;padding-left: 18px;padding-right: 18px;border: 1px solid;font-weight: bold;cursor: hand;}");
    fenetre.document.write(".titre {");
    fenetre.document.write("width: 100%; text-align: center; font-size: 30pt; color: white;font-weight: bold}");
    fenetre.document.write(".tdGauche {");
    fenetre.document.write("width: 120pt;text-align: right; color: #56545F;}");
    fenetre.document.write(".tdDroite {");
    fenetre.document.write("color: black;}");
    fenetre.document.write("</style></head><body>");
    fenetre.document.write("<table width='100%' height='50pt' cellspacing='0' cellpadding='0' border='0'>");
    fenetre.document.write("<tr valign='top'><td align='center'>");
    fenetre.document.write("<span id='prev' class='button' onClick='window.opener.prev()'>Prec.</span>");
    fenetre.document.write(" <b>"+rang+" / "+movies[category].length+"</b> ");
    fenetre.document.write("<span id='next' class='button' onClick='window.opener.next()'>Suiv.</span></td></tr></table>");
    fenetre.document.write("<hr><span class='titre'>"+movie.titre+"</span>");
    fenetre.document.write("<table width='100%' cellspacing='20' cellpadding='0' border='0'>");
    fenetre.document.write("<tr><td class='tdGauche'>Réalisateur : </td><td class='tdDroite'>"+movie.real+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Genre : </td><td class='tdDroite'>"+movie.category+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Support : </td><td class='tdDroite'>"+movie.support+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Durée : </td><td class='tdDroite'>"+movie.tps+" min</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Nombre de disque(s) : </td><td class='tdDroite'>"+movie.nbDisks+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Année : </td><td class='tdDroite'>"+movie.annee+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Pays : </td><td class='tdDroite'>"+movie.pays+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche'>Titre original : </td><td class='tdDroite'>"+movie.titreVO+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche' valign='top'>Acteurs : </td><td class='tdDroite'>"+movie.acteurs+"</td></tr>");
    fenetre.document.write("<tr><td class='tdGauche' valign='top'>Description : </td><td class='tdDroite'>"+movie.desc+"</td></tr>");
    fenetre.document.write("</table></body></html>");
    fenetre.document.close();
  }

</script>
</head>
</body>
<body onLoad="init();" topmargin="5" leftmargin="5">
<a name="top"></a>
<p><p align="center" style="color:#4B4952;font-size:15pt;font-weight: bold">Collection de films du $$DATE</p><hr><p><p>
 <table width="100%" height="85%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="20%" valign="top" align="center">
      <li><div id="menu1"></div></li>
      <ul id="smenu1">
      </ul>

      <li class="menu" onclick="clicMenu('smenu2');" ><div id="menu2"></div></li>
      <ul id="smenu2" onclick="clicMenu('smenu2');" >
         <li> <div id="categoryDiv">
                  </div>  </li>
      </ul>

      <li class="menu" onclick="clicMenu('smenu3');" ><div id="menu3"></div></li>
      <ul id="smenu3" onclick="clicMenu('smenu3');" >
        <li> <div id="supportDiv">
                  </div>  </li>
      </ul>
      
      <li class="menu" onclick="clicMenu('smenu4');" ><div id="menu4"></div></li>
      <ul id="smenu4" onclick="clicMenu('smenu4');" >
        <li> <div id="paysDiv">
                  </div>  </li>
      </ul>
   </td>
   <td width="100px"></td>
   <td valign="top" align="center">
           <div id="tabSelection"></div>
   </td>
</tr>
</table>
<p align="right"><a href="#top">haut de page</a></p>
<hr>
$$ITEM_BEGIN
<div titre="$$ITEM_TRANSLATEDTITLE" nb="$$ITEM_NUMBER" real="$$ITEM_DIRECTOR"
     category="$$ITEM_CATEGORY" support="$$ITEM_VIDEOFORMAT" annee="$$ITEM_YEAR"
     titreVO="$$ITEM_ORIGINALTITLE" pays="$$ITEM_COUNTRY" tps="$$ITEM_LENGTH"
     acteurs="$$ITEM_ACTORS" desc="$$ITEM_DESCRIPTION" nbDisks="$$ITEM_DISKS">
</div>
$$ITEM_END
</body>
</html>

Post by **antp** » 2005-05-03 15:05:44

document.all.id_element c'est propre à IE
En Javascript normalement c'est document.getElementById('id_element');
pour le reste le plus simple est d'utiliser la console javascript de Firefox et de voir quelles lignes provoquent des erreurs.

PS: J'ai rajouté les balises

Code: Select all

 pour rendre le code un peu plus lisible ;)

mistervince · Post by **mistervince** » 2005-06-27 17:22:37

Bonjour tout le monde !

J'ai mis un peu de temps pour la finir (j'avais du boulot !!

) mais voilà le code de la mise à jour de mon modèle d'export au format HTML.
Maintenant il est utilisable sous IE et sous mozilla

.
J'en ai profité pour revoir un peu le code et j'ai simplifié tout en rendant paramétrable les tris.
On peut choisir facilement les champs sur lesquels on désire les tris ainsi que leur ordre dans le fichier html exporté.
Pas de changement par contre pour l'affichage des détails d'un film par clic sur le titre.
J'espère que ce modèle vous sera utile

ciao

Code: Select all

 <html>
<head>
<!--
Modèle proposé par mistervince
Tris selon critères paramétrables en fonction des champs choisis
Détails des films par clic sur le titre
-->
<style type="text/css">
/* style de la page */
body {
	background: #DFDEE2;
	color: black;
	font-size: 13pt;
	font-weight: normal;
	margin-top: 5pt;
}

/* style du titre de la page */
.titrePage {
	text-align: center;
	font-size: 17pt;
	font-weight: bold;
}

table {
	margin-left: 20px;
	margin-top: 20px;
}

/* style du menu Liste complète */
.menuListe {
	margin-top: 5px;
	padding-top: 7px;
	padding-bottom: 7px;
	width: 220px;
	text-align: center;
	font-size: 14pt;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
	background: #9D9AA5;
}

/* style des menus */
.menu {
	margin-top: 15px;
	width: 220px;
	padding-top: 7px;
	padding-bottom: 7px;
	border: 1px solid #DFDEE2;
	text-align: center;
	font-size: 14pt;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
	background: #9D9AA5;
}

/* style des sous-menus */
.sousmenu {
	height: 18px;
	font-size: 12pt;
	cursor: pointer;
	cursor: hand;
	color: black;
	text-decoration: none;
	background: #B6B4BC;
}

/* style des sous menus activé par la souris */
.sousmenu-over {
	height: 18px;
	font-size: 12pt;
	cursor:pointer;
	cursor: hand;
	color: white;
	text-decoration: underline overline;
	background: #B6B4BC;
}

/* style des sous menus déjà visités */
.sousmenu-done {
  height: 18px;
	font-size: 12pt;
	cursor: pointer;
	cursor: hand;
	color: #595663;
	text-decoration: none;
	background: #B6B4BC;
}

/* style des titres dans la liste de droite */
.tabTitre {
	font-size: 12pt;
	cursor: pointer;
	cursor: hand;
}

/* style des blocs de sous-menus */
.fondSsMenu {
	display: none;	// les sous-menus ne sont pas affichés à l'ouverture de la page
	padding-top: 5px;
	width: 220px;
}

a {
	color: black;
}

</style>
<script langage="JavaScript">
/*************************************************************/
/* tableau des différents tris voulus. Attention, les termes doivent être les mêmes que dans le bloc <film> défini en bas
les tris s'affichent dans l'ordre indiqué ici
*/
var lesMenus = new Array("pays","genre");

// récupère tous les films de la collection présente dans <film>
var films;

// indice du film affiché dans la catégorie en cours
var index=0;

// tableau des catégories visitées
var tabLiens = new Array();

// tableau indexé par le nom de la catégorie contenant un tableau avec les films de cette catégorie
var toutesLesCategories = new Array();

// categorie affichée
var categorieEnCours;

/*************************************************************/

// fonction qui ouvre ou ferme les menus pour afficher les sous-menus ou pas
 function clicMenu(idFond,nomTri) {
	// Booléen reconnaissant le navigateur
	isIE = (document.all)
	isNN6 = (!isIE) && (document.getElementById)

	// Compatibilité : l'objet menu est détecté selon le navigateur
	if (isIE) menu = document.all[idFond];
	if (isNN6) menu = document.getElementById(idFond);

	if (menu.style.display == "") menu.style.display = "none";

	// On ouvre ou ferme
	if (menu.style.display == "none"){
		// Cas ou le tableau est caché
		menu.style.display = "block";
	} else {
		// On le cache
		menu.style.display = "none";
	}
}

// fonction appelée au démarrage pour trier les films et fabriquer les menus
function init() {
    // récupération de tous les films
    films = document.body.getElementsByTagName("film");

	// fabrication du menu Liste complète
	document.getElementById('tousLesMenus').innerHTML = "<div class='menuListe' onclick='showCategorie(\"liste\")'>Liste complète    <span style=\"font-size:12px;font-weight: normal;\">("+films.length+" films)</span></div>";

	// ajout dans le tableau des catégories
	toutesLesCategories["liste"] = films;

	// début création des menus donnés
	for (var a=0 ; a<lesMenus.length ; a++) {

		// récuoération du nom du champ sur lequel doit s'effectuer le tri
		var nomTri = lesMenus[a];

		// fabrication du tableau des différentes catégories pour le tri en cours
		var tabDifTris = "tab"+nomTri;
		tabDifTris = new Array();

		var compt=0;

		// parcourt des films et rangement dans les différents tableaux
		for (var i = 0; i < films.length; i++) {

			// récupération du champ du film
			var attribut = films[i].getAttribute(nomTri);

			if (attribut != null && attribut != "") {

				// sélection du tableau correspondant à la catégorie
				var ssCat = toutesLesCategories[attribut];

				// si la catégorie n'a pas encore été créée
				if (ssCat == null) {
					// création du tableau
					ssCat = new Array();
					// ajout du tableau
					toutesLesCategories[attribut] = ssCat;
					// ajout du film
					ssCat[0] = films[i];
					// ajout du nom de la catégorie
					tabDifTris[compt]=attribut;
					compt++;
				}
				// si la catégorie existe déjà
				else {
					// ajout du film en fin de tableau
					ssCat[ssCat.length] = films[i];
				}
			 }
		}

		// tri par ordre alphabétique des catégories pour le tri en cours
		tabDifTris = tabDifTris.sort();

		// initialisation  du tableau des liens
		for (var d=0 ; d<compt ; d++) {
			tabLiens[tabDifTris[d]] = 0;
		}

		var idFond = "fond"+nomTri;

		// fabrication du menu
		var codeMenu = "<div class='menu' onclick=\"clicMenu('"+idFond+"');\">Tri par "+nomTri+"   <span style=\"font-size:12px;font-weight: normal;\">("+tabDifTris.length+")</span></div>";

		// création des ous-menus
		codeMenu = codeMenu + "<div class='fondSsMenu' id='"+idFond+"'>";
		for (var t=0 ; t<compt ; t++){
			codeMenu = codeMenu + "<div class='sousmenu' id='"+tabDifTris[t]+"' onclick='change(this,3,id);showCategorie(\""+tabDifTris[t]+"\");' onmouseover='change(this,1,id);' onmouseout='change(this,2,id);'>" + tabDifTris[t] + "    ("+ toutesLesCategories[tabDifTris[t]].length +")</div>";
		}
		codeMenu = codeMenu + "</div>";

		document.getElementById('tousLesMenus').innerHTML += codeMenu;
	}
	// fin création menus

	// initialisation du genre en cours
	genre = "liste";

	// initialisation de l'affichage (tous les titres)
	document.getElementById('tabSelection').innerHTML = "<table width='100%' border='0'>$$ITEM_BEGIN<tr><td><span class='tabTitre' onClick='ouvreFenetre($$ITEM_NUMBER-1);'>$$ITEM_TRANSLATEDTITLE</span></td></tr>$$ITEM_END</table>";
}

/* fonction de changement du style des sous menus */
function change(menu, option, id){

	switch(option){

		// cas du survol du menu par la souris
		case 1 : 	menu.className='sousmenu-over';
					break;
		// sortie du survol
		case 2 : 	if (tabLiens[id] == 0)
						menu.className='sousmenu';
					else menu.className='sousmenu-done';
					break;
		// clic sur menu
		case 3 : 	tabLiens[id] = 1;
					menu.className='sousmenu-done';
					break;
 	}
}

/* affiche la liste des films selon le tri choisi */
function showCategorie(name) {

	// récupération des films correspondants à la catégorie choisie
	var cat = toutesLesCategories[name];

	var code = "<table width='100%' border='0'>";

	// parcours des films
	for (var h=0 ; h < cat.length ; h++){
		// récupération du film en cours
		var f = cat[h];
		var titre = f.getAttribute('titre');

		code += "<tr><td><span id='"+h+"' class='tabTitre' onClick='ouvreFenetre(id);'>"+titre+"</span></td></tr>";
	}

	// affichage des films de la catégorie
	document.getElementById('tabSelection').innerHTML = code+"</table>";

	// mise à jour du genre en cours
	genre = name;
}

/* affiche les détails du film sélectionné dans une fenêtre de type popup */
function ouvreFenetre(niv) {

	index = eval(niv);

	//récupération du film voulu
	var film = toutesLesCategories[genre][index];

	var rang = index+1;
	var nbTotal = toutesLesCategories[genre].length

	// dimension de la fenêtre
	var largeur=700;
	var hauteur=600;
	var haut=(screen.height-hauteur)/2;
	var gauche=(screen.width-largeur)/2;

	fenetre = window.open("", "Détails", "top="+haut+", left="+gauche+", width="+largeur+", height="+hauteur+", scrollbars=yes, resizable=yes");
	fenetre.focus();
	fenetre.document.write("<html><head><title>"+film.getAttribute('titre')+"</title>");
	fenetre.document.write("<style type='text/css'>");
	fenetre.document.write("body {background: #DFDEE2; color: black; margin-top: 25pt; }");
	fenetre.document.write(".button {      /* Next / Prev buttons */");
	fenetre.document.write("height: 15px;padding-left: 18px;padding-right: 18px;border: 1px solid;font-weight: bold;cursor: pointer;cursor: hand;}");
	fenetre.document.write(".titre {");
	fenetre.document.write("text-align: center; width: 100%; font-size: 30pt; color: white;font-weight: bold;}");
	fenetre.document.write(".tdGauche {");
	fenetre.document.write("width: 120pt;text-align: right; color: #56545F;}");
	fenetre.document.write(".tdDroite {");
	fenetre.document.write("color: black;}");
	fenetre.document.write("</style></head><body>");
	fenetre.document.write("<table width='100%' height='50pt'>");
	fenetre.document.write("<tr valign='top'><td align='center'>");
	fenetre.document.write("<span id='prev' class='button' onClick='window.opener.prev()'>Prec.</span>");
	fenetre.document.write(" <b>"+rang+" / "+nbTotal+"</b> ");
	fenetre.document.write("<span id='next' class='button' onClick='window.opener.next()'>Suiv.</span></td></tr></table>");
	fenetre.document.write("<hr><div class='titre'>"+film.getAttribute('titre')+"</div>");
	fenetre.document.write("<table width='100%' cellspacing='20' cellpadding='0' border='0'>");
	fenetre.document.write("<tr><td class='tdGauche'>Réalisateur : </td><td class='tdDroite'>"+film.getAttribute('real')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Genre : </td><td class='tdDroite'>"+film.getAttribute('genre')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Support : </td><td class='tdDroite'>"+film.getAttribute('support')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Durée : </td><td class='tdDroite'>"+film.getAttribute('duree')+" min</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Nombre de disque(s) : </td><td class='tdDroite'>"+film.getAttribute('nbDisks')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Année : </td><td class='tdDroite'>"+film.getAttribute('annee')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Pays : </td><td class='tdDroite'>"+film.getAttribute('pays')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche'>Titre original : </td><td class='tdDroite'>"+film.getAttribute('titreVO')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche' valign='top'>Acteurs : </td><td class='tdDroite'>"+film.getAttribute('acteurs')+"</td></tr>");
	fenetre.document.write("<tr><td class='tdGauche' valign='top'>Description : </td><td class='tdDroite'>"+film.getAttribute('desc')+"</td></tr>");
	fenetre.document.write("</table></body></html>");
	fenetre.document.close();
}

/* passe au film suivant dans la liste en cours */
function next() {
	index++;
	if (index >= toutesLesCategories[genre].length)
		index = 0;
	ouvreFenetre(index);
}

/* passe au film précédent dans la liste en cours */
function prev() {
	index--;
	if (index < 0)
		index = toutesLesCategories[genre].length - 1;
	ouvreFenetre(index);
}

</script>
<title>Collection de films</title>
</head>
</body>
<body onLoad="init();" link="black" vlink="black" alink="black">
	<a name="top"></a>
	<p class='titrePage'>Collection de films du $$DATE</p><hr>
	Cliquez sur les menus pour afficher les catégories ou sur un titre pour afficher les détails du film.
	<table height="80%">
		<tr>
			<td valign="top" align="center">
				<div id="tousLesMenus"></div>
			</td>

			<td width="100px">
			</td>

			<td valign="top">
				<div id="tabSelection"></div>
			</td>
		</tr>
	</table>
	<p align="right"><a href="#top">haut de page</a></p>
	$$ITEM_BEGIN
	<film titre="$$ITEM_TRANSLATEDTITLE" num="$$ITEM_NUMBER" real=" $$ITEM_DIRECTOR" genre="$$ITEM_CATEGORY" support="$$ITEM_VIDEOFORMAT"
	annee=" $$ITEM_YEAR" titreVO="$$ITEM_ORIGINALTITLE" pays="$$ITEM_COUNTRY" duree=" $$ITEM_LENGTH" acteurs="$$ITEM_ACTORS"
	desc="$$ITEM_DESCRIPTION" nbDisks="$$ITEM_DISKS">
	</film>
	$$ITEM_END
</body>
</html>

kaly · Post by **kaly** » 2005-08-22 14:03:03

salut, bien ton template, je regrettes cependant que tu n'es pas conservé les jacquettes et affiches de films

mistervince · Post by **mistervince** » 2005-09-04 18:14:29

Salut

En fait, j'ai volontairement oublié de mettre les pochettes des films dans la description

. Je voulais obtenir UN seul fichier pour pouvoir plus facilement le donner à des amis voulant connaitre la liste des films en ma possession.
Je regarde ce que je peux faire pour arranger cet oubli

...

Merci pour le message

à bientôt

Vince

mistervince · Post by **mistervince** » 2005-09-04 19:22:32

re salut

En fait, ça n'a pas été bien long. Il y a juste quelque trucs à rajouter pour afficher l'image de chaque film.

Pour commencer, tout en bas (à la ligne 380 si tu n'as rien changé), il faut rajouter le champ avec le nom de l'image, par exemple : nom_poch="$$ITEM_PICTUREFILENAME"

Ca donne :
$$ITEM_BEGIN
<film titre="$$ITEM_TRANSLATEDTITLE" ...... nbDisks="$$ITEM_DISKS" nom_poch="$$ITEM_PICTUREFILENAME">
</film>
$$ITEM_END

Remonte un petit peu pour arriver à la description de la fenêtre popup

(ligne 335 plus précisément). Avant la ligne :
fenetre.document.write("</table></body></html>");

rajoutes :
fenetre.document.write("<tr><td class='tdGauche' valign='top'>Pochette : </td><td class='tdDroite'><img src='"+film.getAttribute('nom_poch')+"' alt='image manquante'></td></tr>");

Et voilà, c'est fini

Tu devrais maintenant avoir la pochette de tes films en bas de la fenêtre de description du film.
N'oublie pas de cocher l'option "copier les images vers le même dossier de destination" en bas à gauche dans l'export de movie catalog, sinon ça marchera pas

.

ciao
Vince

thepure · Post by **thepure** » 2006-02-09 19:37:10

Merci "mistervince" pour ce model de template, j'ai cependant un petit soucis je sais pas si c est moi mais en dessous du lien pour revenir en haut de page (qui forcement ce trouve en bas de page

" j'ai les commentaires de tous mes films mis a la queu leleu, rien de bien grave en soit mais est ce que je suis le seul a avoir ce probleme?

mistervince · Post by **mistervince** » 2006-02-13 15:15:48

salut.

Peut-être s'agit-il d'un problème de guillemets. Je m'explique. Le javascript (utilisé pour fabriquer la page) considère le guillemet comme un caractère de début et de fin de chaine de caractères. Si ton champ commentaire (ou n'importe quel autre champs) contient un guillemet, ça coupe la chaine et la suite est rejetée à la fin de la page (après le lien début de page).

Solution :
- éviter les guillemets dans les champs

, ou bien si tu veux pouvoir les utiliser...
- remplacer les guillemets par des simples quotes (caractère ' en appuyant sur la touche 4) dans le code des lignes suivantes :

Code: Select all

$$ITEM_BEGIN
   <film titre="$$ITEM_TRANSLATEDTITLE" num="$$ITEM_NUMBER" real=" $$ITEM_DIRECTOR" genre="$$ITEM_CATEGORY" support="$$ITEM_VIDEOFORMAT"
   annee=" $$ITEM_YEAR" titreVO="$$ITEM_ORIGINALTITLE" pays="$$ITEM_COUNTRY" duree=" $$ITEM_LENGTH" acteurs="$$ITEM_ACTORS"
   desc="$$ITEM_DESCRIPTION" nbDisks="$$ITEM_DISKS">
   </film>
   $$ITEM_END

J'avoue que je n'ai jamais testé cette dernière méthode

parce que les guillemets n'étaient pas indispensables ds mes commentaires mais bon, ça devrait marcher.

En fait, je pense qu'on ne peut pas utiliser le même caractère de séparation (soit " soit ') dans le code ci-dessus et dans les champs. Le $$ITEM_DESCRIPTION est remplacé par le contenu de la description du film dans AMC et si ce contenu contient le même caractère que celui utilisé pour encadrer $$ITEM_DESCRIPTION, la description est considéré comme terminée par javascript, d'où problème !!!

Je me rends compte que j'aurai pu changer ça moi-même puisqu'on utilise plus souvent " plutôt que '.

En tout cas, je teste ça ce soir ou demain chez moi

et je vous en reparle.

Vincent

Post by **antp** » 2006-02-13 17:00:48

Je pense que c'est l'inverse, les ' sont plus utiles que les " (L' c' n' d' etc. en français, 's en anglais)

Les " peuvent être remplacés par des doubles ' (ou des « » pour ceux qui les ont sur leur clavier).

mistervince · Post by **mistervince** » 2006-02-14 19:16:46

Je suis tout à fait d'accord

évidemment !!!

C'est seulement une fois posté ma réponse que je me suis rendu compte de la co... bêtise que j'avais écrite !!!

Je devais être fatigué

ou alors je pensais à un caractère imaginaire ressemblant à une apostrophe mais sans vraiment en être (???)

Enfin, l'explication reste vrai : il faut éviter les guillemets dans les champs et faire comme nous l'a dit antp.

Désolé

Vince

antp.be forum

[FR] Modèle export html

[FR] Modèle export html

Mise à jour

c'est vrai

Re moi