[Réglé] Menu déroulant sur page personnalisée

Ce forum aborde toutes les questions qu'un codeur ou webmaster pourrait se poser, et n'ayant aucun rapport direct avec phpBB.
Tout ce qui peut concerner la récupération des sessions de phpBB sur votre site, doit se faire dans cette section.

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com

[Réglé] Menu déroulant sur page personnalisée

Messagepar Horeus » 22 Nov 2011 à 18:24

Bonjour à tous

Actuellement, j'ai une page personnalisée avec des images, chacune d'elle ayant une url propre et renvoyant sur un topic du forum. Au fil du temps, les images s'accumulent et cela finira que cela deviendra illisible.
J'ai donc pensé à utiliser un menu déroulant en haut de la page. et selon l'option choisie, les images correspondantes s'afficheraient.
Je sais que je dois utiliser "option value" mais... c'est tout. J'ai essayé de voir ce système de codage en prenant exemple avec le fichier donation.html qui se trouve dans le mod board3 Portal mais ça ne m'a pas plus avancé.
Pourriez-vous m'aider à coder cette page ou bien me donner quelques tuyaux/me guider ?
Merci par avance.

PS : voici "en gros", ce que cela pourrait donner en image

http://i41.servimg.com/u/f41/16/61/32/74/111.jpg
Modifié en dernier par Horeus le 23 Nov 2011 à 00:41, modifié 1 fois.
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 22 Nov 2011 à 20:06

Salut,


Je peux tout à fait t'aider.
C'est à faire en JavaScript (je conseille JQuery).

Il me faudrait un peu plus de détails sur comment sont les images.
La meilleure solution pour faire ce que tu souhaites, c'est à mon avis de faire quelque chose de ce genre :
Code: Tout sélectionner
<img src="..." alt="Tigre" data-categories="animaux"/>
<
img src="..." alt="Chat" data-categories="animaux"/>
<
img src="..." alt="Chien" data-categories="animaux"/>
<
img src="..." alt="Polo" data-categories="voitures"/>
<
img src="..." alt="206" data-categories="animaux"/>
<
img src="..." alt="Picasso" data-categories="animaux"/>
<
img src="..." alt="Voiture avec des léopards dessinés dessus" data-categories="animaux,voiture"/> 



Tu t'y connait un petit peu en JavaScript (et JQuery ?) ?
Si oui (ou non d'ailleurs), as-tu déjà intégré JQuery à ta page ?

Possible par la même occasion d'avoir un lien où se trouve ta page (je peux répondre moi même à certaines questions :) ).


Et une dernière : Ta page, elle est générée en PHP ou directement en HTML ?



@++
CowBoySD
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53

Re: Menu déroulant sur page personnalisée

Messagepar Horeus » 22 Nov 2011 à 20:33

Merci CowBoySD pour votre aide.

Donc, pour commencer, je vais répondre à vos questions. J'ai déjà intégré Jquery dans le forum car j'en avais besoin pour un caroussel. Bon, par contre, j'y connais que dalle :mrgreen: Je manipule un peu mais c'est très limité.
Pour la génération de la page, elle l'est en php je suppose car j'ai suivi le tutoriel (dans le forum documentation) sur la création d'une page personnalisée.

Sinon, j'avais oublié de préciser mais pour le moment, je peux mettre des images. Mais ce ne sera plus le cas dans quelques années (si le site est encore là) car le nombre aura fortement augmenté. A ce moment, j'opterai pour une liste, mais toujours avec ce système de choix.
Les images actuelles sont réduites via le code html que j'ai inséré. D'origine, elles font 400x300 mais réduites (et affichées dans cette page spéciale), elle sont à 100x75.
Modifié en dernier par Horeus le 22 Nov 2011 à 20:46, modifié 1 fois.
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 22 Nov 2011 à 20:35

Ok ça marche.
Mais pourrais-je avoir un aperçu ?

Et pouvez vous donc facilement ajouter vos catégorie ?
Vous pensez bien ajouter les catégories manuellement ?
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53

Re: Menu déroulant sur page personnalisée

Messagepar Horeus » 22 Nov 2011 à 20:36

Oui, pour simplifier, j'ajouterai les catégories manuellement comme je le fais actuellement.
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 22 Nov 2011 à 21:04

Code: Tout sélectionner
<select onchange="ModifierCategorie(this)">
    <
option value="tous">Tous</option>
    <
option value="atari">Atari</option>
    <
option value="cbs">CBS</option>
    <
option value="nintendo">Nintendo</option>
</
select

Code: Tout sélectionner
<img src="..." alt="atari xx xx xx" data-cat="atari"/>
<
img src="..." alt="atari xx xx xx2" data-cat="atari"/>
<
img src="..." alt="cbs xx xx xx" data-cat="cbs"/>
<
img src="..." alt="cbs xx xx xx2" data-cat="cbs"/>
<
img src="..." alt="nintendo xx xx xx" data-cat="nintendo"/>
<
img src="..." alt="nintendo xx xx xx2" data-cat="nintendo"/> 

Code: Tout sélectionner
<script type="text/javascript">
    function 
ModifierCategorie (this_select)
    {
        if (
this_select.value == "tous")  
        {  
            $(
'img[data-cat]').show();
        }
        else
        {
            $(
'img[data-cat]').hide();
            $(
'img[data-cat="' this_select.value '"]').show();
        }
    }
</script>


Sur ta page, je n'ai pas vu que tu appelais JQuery... si je ne me suis pas trompé, ajoute donc ceci :
Code: Tout sélectionner
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>




Si tu as des questions ... ;)
Je n'ai rien testé du tout, j'ai écris ce code directement dans le navigateur. Donc c'est peut être possible qu'il y est une erreur.
Si c'est le cas, préviens moi.



Quelques remarques :
- A chaque modif, n’oublie pas de vider le cache phpBB.
- N'oublie pas de créer les catégories, et de les ajouter aux images. Toutes les images doivent avoir une catégorie.
- Les noms de catégories doivent être en minuscules, et sans caractères spéciaux. A la rigueur des chiffres, et les tirets (- et _).
- Si tu viens à rencontrer un problème, merci de d'abord modifier la version en ligne, que je puisse voir en direct.
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53

Re: Menu déroulant sur page personnalisée

Messagepar Horeus » 22 Nov 2011 à 23:51

Merci pour ton aide.
Je vais bosser là dessus et je te tiens au courant.

Edit :
Génial, ça marche !
Vu qu'il ne reste que des détails d'ordre esthétique et que le plus gros est fait, je vais mettre résolu.
Un grand merci à toi CowBoySD, le cow-deur qui code plus vite que son ombre :mrgreen:
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 23 Nov 2011 à 07:36

Salut,



Je reprends quelques parties de ta réponse par MP :
Pouvoir afficher au dessus de la boite de dialogue "Choisir une machine :" (quoique, en réfléchissant à tête reposée ça va se faire)

Là c'est autre chose ... c'est l'adaptation de phpBB.
Si tu n'y arrives pas, donne moi le code de ta page, et je te redirai.

Ne pas afficher d'images si aucune option est choisie (là, par contre, aucune idée)

C'est à dire ?
Tu voudrais que par défaut toutes les images soient cachées ?

Tu as qu'à procéder ainsi :
- Tu ajoutes en premier cette option :
Code: Tout sélectionner
<option value="aucun">Aucun</option

Puis ensuite, après ce code :
Code: Tout sélectionner
        if (this_select.value == "tous")  
        {  
            $(
'img[data-cat]').show();
        } 

Tu ajoutes :
Code: Tout sélectionner
        elseif (this_select.value == "aucun")  
        {  
            $(
'img[data-cat]').hide();
        } 





Horeus a écrit:Vu qu'il ne reste que des détails d'ordre esthétique

En effet, centrer peut être le select, ou faire quelque chose de ce genre, et ça devrait déjà être mieux.
Après, si tu veux par exemple animer les images, tu peux les faire afficher et cacher avec de l'animation.

Exemple :
Code: Tout sélectionner
<script type="text/javascript">
    function 
ModifierCategorie (this_select)
    {
        if (
this_select.value == "tous")  
        {  
            $(
'img[data-cat]').show(800);
        }
        elseif (
this_select.value == "aucun")  
        {  
            $(
'img[data-cat]').hide(400);
        }
        else
        {
            $(
'img[data-cat]').hide(400);
            $(
'img[data-cat="' this_select.value '"]').delay(400).show(800);
        }
    }
</script>

Ou encore :
Code: Tout sélectionner
<script type="text/javascript">
    function 
ModifierCategorie (this_select)
    {
        if (
this_select.value == "tous")  
        {  
            $(
'img[data-cat]').slideDown(800);
        }
        elseif (
this_select.value == "aucun")  
        {  
            $(
'img[data-cat]').slideUp(400);
        }
        else
        {
            $(
'img[data-cat]').slideUp(400);
            $(
'img[data-cat="' this_select.value '"]').delay(400).slideDown(800);
        }
    }
</script>




De rien,

Bonne journée,
@++
CowBoySD
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53

Re: Menu déroulant sur page personnalisée

Messagepar Horeus » 23 Nov 2011 à 11:48

Salut,
Je vais aussi reprendre des éléments pour te répondre ^^

CowBoySD a écrit:Là c'est autre chose ... c'est l'adaptation de phpBB.
Si tu n'y arrives pas, donne moi le code de ta page, et je te redirai.

En fait, je me suis mal exprimé. Mais j'ai placé la boite de choix (et non de dialogue) là où je le voulais.

CowBoySD a écrit:Tu voudrais que par défaut toutes les images soient cachées ?

Euh, finalement, j'ai changé d'avis car un espae vide, ça ne le fait pas trop ^^
Par contre, je garde ce morceau de code dans un coin. Il pourrait servir ultérieurement, que ce soit pour moi ou la communauté.

CowBoySD a écrit:Après, si tu veux par exemple animer les images, tu peux les faire afficher et cacher avec de l'animation.

Juste pour voir ce que cela donnerait, j'ai essayé ces deux codes malheureusement, ils ne fonctionnent pas.

Comme tu as pu le voir, pour certaines catégories, il y a de nombreuses images. Et cela ne va pas s'arranger avec le temps bien que cela arriverait que dans 2 ou 3 ans. Donc, si, un jour, je ne veux plus afficher les images mais seulement le titre, comment je devrais faire ? Comme ça ? :

Code: Tout sélectionner
<a href="lien" onclick="this.target='_blank'"><data-cat="categorie1"/>titre</a></b>
<a href="lien" onclick="this.target='_blank'"><data-cat="categorie2"/>titre</a></b>
<a href="lien" onclick="this.target='_blank'"><data-cat="categorie2"/>titre</a></b>
<a href="lien" onclick="this.target='_blank'"><data-cat="categorie1"/>titre</a></b>
<a href="lien" onclick="this.target='_blank'"><data-cat="categorie3"/>titre</a></b>
<a href="lien" onclick="this.target='_blank'"><data-cat="categorie2"/>titre</a></b>


Enfin (dernière question), si je veux inclure un nouveau paramètre (un data-cat2, pour, par exemple, classer par année), le code php doit sûrement changer. J'ai fait quelques tests mais ce n'est pas pris en compte.
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 23 Nov 2011 à 15:07

Horeus a écrit:
CowBoySD a écrit:Tu voudrais que par défaut toutes les images soient cachées ?

Euh, finalement, j'ai changé d'avis car un espae vide, ça ne le fait pas trop ^^
Par contre, je garde ce morceau de code dans un coin. Il pourrait servir ultérieurement, que ce soit pour moi ou la communauté.

Il est d'ailleurs préférable de tous les afficher par défaut, pour ceux qui aurait un navigateur ne supportant pas la JavaScript (ou qui l'aurait désactivé par défaut).



Horeus a écrit:Juste pour voir ce que cela donnerait, j'ai essayé ces deux codes malheureusement, ils ne fonctionnent pas.
[...]
Enfin (dernière question), si je veux inclure un nouveau paramètre (un data-cat2, pour, par exemple, classer par année), le code php doit sûrement changer. J'ai fait quelques tests mais ce n'est pas pris en compte.

J'ai fais pas mal de modifs...
Voilà les select :
Code: Tout sélectionner
<select id="select_categ" onchange="ActualiserImages()">
    <option value="tous">- Par machine -</option>
    <option value="2600">Atari 2600</option>
    <option value="7800">Atari 7800</option>
    <option value="cbs">CBS Colecovision</option>
    <option value="gb">Nintendo Game Boy</option>
    <option value="gba">Nintendo Game Boy Advance</option>
    <option value="nes">Nintendo NES</option>
    <option value="snes">Nintendo SNES</option>
    <option value="vb">Nintendo Virtual Boy</option>
    <option value="wii">Nintendo Wii</option>
    <option value="dreamcast">Sega Dreamcast</option>
    <option value="megadrive">Sega Megadrive</option>
    <option value="ps1">Sony PlayStation 1</option>
    <option value="ps2">Sony PlayStation 2</option>
    <option value="psp">Sony PSP</option>
    <option value="systeme">Système</option>
</
select>
<
select id="select_genre" onchange="ActualiserImages()">
    <option value="tous">- Par genre -</option>
    <option value="action">Action</option>
    <option value="aventure">Aventure</option>
    <option value="combat">Combat</option>
    <option value="course">Course</option>
    <option value="fps">FPS</option>
    <option value="inclassable">Inclassable</option>
    <option value="platesformes2">Plates-formes 2D</option>
    <option value="platesformes3">Plates-formes 3D</option>
    <option value="puzzle">Puzzle-game</option>
    <option value="rpg">RPG</option>
    <option value="shootemup">Shootem up</option>
    <option value="sport">Sport</option>    
</select>
<
select id="select_annee" onchange="ActualiserImages()">
    <option value="tous">- Par ann&eacute;-</option>
    <option value="1977">1977</option>
    <option value="1978">1978</option>
    <option value="1979">1979</option>
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
    <option value="1983">1983</option>
    <option value="1984">1984</option>
    <option value="1985">1985</option>
    <option value="1986">1986</option>
    <option value="1987">1987</option>
    <option value="1988">1988</option>
    <option value="1989">1989</option>
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
</
select> 



Puis le JavaScript :
Code: Tout sélectionner
<script type="text/javascript">
    function ActualiserImages ()
    {
       $('a[data-categ]').fadeOut(100);
       $('a'
       + (($("#select_categ").val() != "tous") ? '[data-categ="' + $("#select_categ").val() + '"]' : "")
       + (($("#select_genre").val() != "tous") ? '[data-genre="' + $("#select_genre").val() + '"]' : "")
       + (($("#select_annee").val() != "tous") ? '[data-annee="' + $("#select_annee").val() + '"]' : ""))
       .delay(200).fadeIn(700);
    }
</script>



Puis toutes tes images doivent être de cette forme :
Code: Tout sélectionner
<a data-categ="psp" data-genre="action" data-annee="1995" ......><img ..... /></a> 




J'ai aussi mis quelques animations...
Tiens moi au courant.



@++
CowBoySD
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53

Re: Menu déroulant sur page personnalisée

Messagepar Horeus » 23 Nov 2011 à 17:34

Encore mieux que ce que j'espérais ! Merci énormément.
Ce qu'il y a de bien est que si je veux créer une nouvelle catégorie, je sais comment faire ^^

Avant de te laisser tranquille, peux tu me dire ce que je devrais faire quand j'aurais trop d'images ? Je les vire et mets seulement les titres ou bien il faudra manipuler le code php ?
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 23 Nov 2011 à 17:49

Tu as ceci :
Code: Tout sélectionner
<a data-categ="psp" data-genre="action" data-annee="1995" ......><img ..... /></a>  

Tu peux très bien maintenant remplacer par :
Code: Tout sélectionner
<a data-categ="psp" data-genre="action" data-annee="1995" ......><div ...></div></a>  

Code: Tout sélectionner
<a data-categ="psp" data-genre="action" data-annee="1995" ......><span...></span></a>  

Code: Tout sélectionner
<a data-categ="psp" data-genre="action" data-annee="1995" ......>Texte</a>  

...


Il faut juste laisser les balises a.
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53

Re: Menu déroulant sur page personnalisée

Messagepar Horeus » 23 Nov 2011 à 18:31

Ok, c'est noté.
Encore merci pour ces précisions et ton travail.
Horeus
Posteur habitué
Posteur habitué
 
Messages: 277
Enregistré le: 13 Sep 2009 à 18:18

Re: Menu déroulant sur page personnalisée

Messagepar CowBoySD » 23 Nov 2011 à 21:05

De rien.
Création de site web : http://dewep.net
Avatar de l’utilisateur
CowBoySD
Graph Contest Winner
Graph Contest Winner
 
Messages: 321
Enregistré le: 24 Nov 2009 à 20:53


Retourner vers Coding, Webmastering et Sécurité informatique

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron