Faire une liste extensible

Faire une liste extensible - HTML/CSS - Programmation

Marsh Posté le 29-12-2014 à 14:41:53    

Bonjour,
 
je souhaite faire une liste extensible sur une page web, dans ce style :
 

Citation :


les légumes :
- Carotte
- Catalonia
- Chou blanc
- Chou de Bruxelles
- Chou frisé
- Chou rouge
- Chou-chinois
  plus


 
et lorsque l'on cliquerait sur "plus", la liste se déroulerait :
 

Citation :


les légumes :
- Carotte
- Catalonia
- Chou blanc
- Chou de Bruxelles
- Chou frisé
- Chou rouge
- Chou-chinois
- Cima di Rapa
- Citrouille
- Courge
- Céleri
- Endive
- Mâche
- Oignon
- Panais
- Poireau
- Pomme de terre
- Salsifis
- Topinambour
  moins


 
et lorsque l'on clique sur "moins", la liste se ré-enroule
 
si en plus il y avait un effet de scroll lors du déroulement de la liste ça serait génial !
 
j'ai recherché sur internet, je tombe sur des choses intéressantes, mais rien qui ne corresponde réellement à ce que je désires
 
pouvez-vous m'aider ?
 
merci.


Message édité par Ze_Noob le 29-12-2014 à 18:47:24
Reply

Marsh Posté le 29-12-2014 à 14:41:53   

Reply

Marsh Posté le 30-12-2014 à 09:43:22    

Bonjour,
 
Le seul moyen pour faire l'animation que tu souhaite et de passer par Javascript et/ou Jquery.
 
Tu pourra ainsi facilement ajouter du contenu à ta list.
Voici le code qui te permet de faire ça avec Jquery. Tu n'auras plus qu'a utilisé toutes les fonctions de cette librairie pour faire tes effets.
 
 

Code :
  1. <!doctype html>
  2. <html>
  4.   <head>
  5.      <title>Titre de la page</title>
  6.      <link rel="stylesheet" type="text/css" href="styles.css">
  7.   </head>
  8.  <script src="jquery.js"></script> <!-- appel à ton fichier jquery -->
  10.  <script type="application/javascript">
  11.  var array = ["Cima di Rapa","Citrouille","Courge","Céleri"]; //tableau de mot à ajouter
  13.  $(document).ready(function(){
  14.   $('#eventList').on('click',function(){ //Evenement lorsque le bouton plus ou moins est cliqué
  16.    if ($('#eventList').attr('value') == 'plus') { //on vérifie si c'est le bouton plus
  17.     for(var key in array){ //on parcrour le tableau et on ajoute les mot du tableau à la liste
  18.      $("#listDyn" ).append("<li>"+array[key]+"</li>" );
  19.     }
  21.     $('#eventList').attr('value','moins'); //on change la valeur de plus en moins
  22.     $('#eventList').text('Moins'); //on change aussi le text du bouton
  23.    }
  24.    else{
  25.     $("#listDyn li" ).each(function(index){ //on parcour la liste, si les mots sont dans le tableau array on les supprime de la liste
  26.      if(array.indexOf($( this ).text()) >= 0){
  27.       $( this ).remove();
  28.      }
  30.     });
  31.     $('#eventList').attr('value','plus'); //on change la valleur de moins en plus
  32.     $('#eventList').text('Plus'); //on change aussi le text du bouton
  33.    }
  35.   });
  36.  });
  38. </script>
  40. <style type="text/css">
  41. </style>
  42.   <body>
  43.    
  46. <ul id="listDyn">
  47.  <li>Carotte</li>
  48.  <li>Chou blanc</li>
  49.  <li>Chou de Bruxelles</li>
  50.  <li>Chou frisé</li>
  51.  <li>Chou rouge</li>
  52.  <li>Chou-chinois</li>
  53. </ul>
  55. <button id="eventList" value='plus'>Plus</button>
  57.   </body>
  59. </html>


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 30-12-2014 à 17:06:06    

merci beaucoup OrcusZ d'avoir pris le temps de m'expliquer le code !
 
tout fonctionne, sauf lorsque l'on met un caractère spécial (type : &agrave; &circ; etc.) : lorsque l'on ré-enroule la liste, le mot contenant le caractère spécial reste (alors que les autres disparaissent normalement) et se réajoute lorsque l'on déroule la liste, ce qui fait qu'à force de ré-enrouler et dérouler les mots qui buggent s'affichent et ça donne une liste à rallonge avec ces mots qui apparaissent plusieurs fois, on est donc obligé de mettre les mots avec l'accentuation, ce qui il me semble n'est pas recommandé
 
y'a-t-il moyen de résoudre ce problème ? :/


Message édité par Ze_Noob le 30-12-2014 à 17:06:54
Reply

Marsh Posté le 30-12-2014 à 17:12:13    

Passer le charset de ta page en UTF8  (balise meta et enregistrer sous charset UTF8) et mettre des accents...
 
https://www.google.fr/search?q=html+utf-8


---------------
D3
Reply

Marsh Posté le 30-12-2014 à 20:13:08    

d'accord, merci pour l'info, mais je pensais que pour respecter les standards W3C il ne fallait pas mettre les accents :??:

Reply

Marsh Posté le 31-12-2014 à 08:29:59    

Re,
 
Le standard W3C est international mais il faut bien respecter toutes les spécialité de langage existant.
 
Sinon tu dois pouvoir mettre les accents en caractère spéciaux directement dans le tableau de mot


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 31-12-2014 à 12:23:19    

slt,
 
oui dans le tableau il n'y a pas de soucis, c'est dans le tableau de mots à rajouter que ça bug (ligne 11 dans le code que tu m'as donné)

Reply

Marsh Posté le 31-12-2014 à 13:24:06    

tu peux faire ça
 

Code :
  1. var array = ["Cima di Rapa","Citrouille","Courge","C&eacute;leri"]; //tableau de mot à ajouter


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 31-12-2014 à 13:40:02    

oui, c'est ce que j'ai fait, mais du coup la liste ne se ré-enroule pas totalement, tous les mots où il y a présence d'un caractère spécial ne se masquent pas, ils restent et lorsque l'on déroule la liste, ils se surajoutent à la liste masquée et ainsi de suite, pour au final avoir 20 fois ces mots

Reply

Marsh Posté le 31-12-2014 à 16:10:01    

Dans ces cas la UTF8 pour pas ce compliqué la vie :)


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 31-12-2014 à 16:10:01   

Reply

Marsh Posté le 31-12-2014 à 16:45:36    

mais ça sera quand même dans les normes W3C si je mets les accents "en dur" ?

Reply

Marsh Posté le 31-12-2014 à 17:28:22    

Vu que tu précise l'encodage de ton fichier oui normalement mais je suis pas spécialiste de ces normes ^^


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 31-12-2014 à 18:12:33    

Autrement au lieu de vérifier si les occurrences sont dans la liste avant de les supprimer, autant supprimer x fois les occurrences sans les vérifier où x est ton nombre d'occurrence dans ton tableau de départ.
En javascript normalement quand tu supprimes c'est le dernier élément fils qui part (donc je pense que c'est pareil en Jquery) et du coup tu retombes sur tes pieds puisque ça va correspondre aux éléments que tu auras ajouté.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed