Faire une liste extensible

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Faire une liste extensible

Ze_Noob

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

Publicité

OrcusZ

Pro AMD | .Net lover

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 :

<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<script src="jquery.js"></script>
<script type="application/javascript">
var array = ["Cima di Rapa","Citrouille","Courge","Céleri"]; //tableau de mot à ajouter
$(document).ready(function(){
$('#eventList').on('click',function(){ //Evenement lorsque le bouton plus ou moins est cliqué
if ($('#eventList').attr('value') == 'plus') { //on vérifie si c'est le bouton plus
for(var key in array){ //on parcrour le tableau et on ajoute les mot du tableau à la liste
$("#listDyn" ).append("<li>"+array[key]+"</li>" );
}
$('#eventList').attr('value','moins'); //on change la valeur de plus en moins
$('#eventList').text('Moins'); //on change aussi le text du bouton
}
else{
$("#listDyn li" ).each(function(index){ //on parcour la liste, si les mots sont dans le tableau array on les supprime de la liste
if(array.indexOf($( this ).text()) >= 0){
$( this ).remove();
}
});
$('#eventList').attr('value','plus'); //on change la valleur de moins en plus
$('#eventList').text('Plus'); //on change aussi le text du bouton
}
});
});
</script>
<style type="text/css">
</style>
<body>
<ul id="listDyn">
<li>Carotte</li>
<li>Chou blanc</li>
<li>Chou de Bruxelles</li>
<li>Chou frisé</li>
<li>Chou rouge</li>
<li>Chou-chinois</li>
</ul>
<button id="eventList" value='plus'>Plus</button>
</body>
</html>

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

Ze_Noob

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 : à &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

mechkurt

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

Ze_Noob

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

OrcusZ

Pro AMD | .Net lover

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

Ze_Noob

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

OrcusZ

Pro AMD | .Net lover

tu peux faire ça

Code :

var array = ["Cima di Rapa","Citrouille","Courge","Céleri"]; //tableau de mot à ajouter

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

Ze_Noob

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

OrcusZ

Pro AMD | .Net lover

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

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

Publicité

Ze_Noob

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

OrcusZ

Pro AMD | .Net lover

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

MaybeEijOrNot

but someone at least

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

FORUM HardWare.fr

Programmation

HTML/CSS

Faire une liste extensible

Sujets relatifs
Recuperer la classe des objets d une liste	Faire 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 MYSQL	Image de fond pour une liste
[Shell] Executer des commandes en provenance d'une liste	Récupérer une liste de ville avec PHP/Curl
Parcourir une liste avec iterator	Excel : Résumé / Liste déroulante
Plus de sujets relatifs à : Faire une liste extensible

Page générée en 0.057 secondes