Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1379 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Faire une liste extensible

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Faire une liste extensible

n°2247061
Ze_Noob
Posté le 29-12-2014 à 14:41:53  profilanswer
 

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
mood
Publicité
Posté le 29-12-2014 à 14:41:53  profilanswer
 

n°2247088
OrcusZ
Pro AMD | .Net lover
Posté le 30-12-2014 à 09:43:22  profilanswer
 

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...
n°2247100
Ze_Noob
Posté le 30-12-2014 à 17:06:06  profilanswer
 

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
n°2247101
mechkurt
Posté le 30-12-2014 à 17:12:13  profilanswer
 

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
n°2247112
Ze_Noob
Posté le 30-12-2014 à 20:13:08  profilanswer
 

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

n°2247133
OrcusZ
Pro AMD | .Net lover
Posté le 31-12-2014 à 08:29:59  profilanswer
 

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...
n°2247149
Ze_Noob
Posté le 31-12-2014 à 12:23:19  profilanswer
 

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é)

n°2247151
OrcusZ
Pro AMD | .Net lover
Posté le 31-12-2014 à 13:24:06  profilanswer
 

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...
n°2247155
Ze_Noob
Posté le 31-12-2014 à 13:40:02  profilanswer
 

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

n°2247161
OrcusZ
Pro AMD | .Net lover
Posté le 31-12-2014 à 16:10:01  profilanswer
 

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


---------------
Made you your own sentence without believing that of the others...
mood
Publicité
Posté le 31-12-2014 à 16:10:01  profilanswer
 

n°2247165
Ze_Noob
Posté le 31-12-2014 à 16:45:36  profilanswer
 

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

n°2247168
OrcusZ
Pro AMD | .Net lover
Posté le 31-12-2014 à 17:28:22  profilanswer
 

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...
n°2247174
MaybeEijOr​Not
but someone at least
Posté le 31-12-2014 à 18:12:33  profilanswer
 

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é.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Faire une liste extensible

 

Sujets relatifs
Recuperer la classe des objets d une listeFaire apparaitre les valeurs de la liste d'un combo/text box directeme
Cherches liste de compétences de type Linked-in[PHP] Checkbox dans une liste
[RESOLU] FORMULAIRE + LISTE MYSQLImage de fond pour une liste
[Shell] Executer des commandes en provenance d'une listeRécupérer une liste de ville avec PHP/Curl
Parcourir une liste avec iteratorExcel : Résumé / Liste déroulante
Plus de sujets relatifs à : Faire une liste extensible

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.058 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR