Forum : Un type de select différent

Bonsoir.
Ta demande est incompréhensible, donc si tu veux que nous puissions t'aider, sois le plus explicite possible.
Si tu as déja essayé de faire quelque chose, montre nous le code qui y correspond.

Alex

Auteur

Je souhaiterais pour faire un choix dans mon editor une certaine forme de "formulaire":

Dans ce style là:
http://prntscr.com/dhscau

Cela est assez explicite?
Or j'ai essayé de le faire, je n'y arrive pas vraiment car le design n'est pas mon point fort du tout.

Voilà tout.

SLK

Salut,

lol on ne voit pratiquement rien sur l'image xD

le design n'est pas mon point fort du tout

Ce n'est pas vraiment une question de design (CSS).

Je crois qu'il faut utiliser l'AJAX pour faire ça.
Moi je connais trop mal l'AJAX.

Sinon sans AJAX...

// au chargement du site il faut initialiser une variable de SESSION
$_SESSION['sex_index'] = 0;

// aileurs dans le site
$sex_array = ['Femme', 'Homme', 'Trans', 'Michael-Jackson'];
$nb_sex_choice = count($sex_array);
$sex_change = $_GET['sex_change'] ?? null;
if ($sex_change)
{
    if ($sex_change == 'previous')
    {
        if ($_SESSION['sex_index'] == 0)
        {
            $_SESSION['sex_index'] = $nb_sex_choice - 1;
        }
        else
        {
            $_SESSION['sex_index']--; // je me demande s'il ne faut pas plutôt l'écrire "($_SESSION['sex_index'])--;"...
        }
    }
    else // $sex_change == next
    {
        if ($_SESSION['sex_index'] == ($nb_sex_choice - 1))
        {
            $_SESSION['sex_index'] = 0;
        }
        else
        {
            $_SESSION['sex_index']++;
        }
    }
}
echo '<a href="lien_vers_cette_meme_page.php&sex_change="previous"><</a>' . $sex_array[$_SESSION['sex_index'] . '<a href="lien_vers_cette_meme_page.php&sex_change="next">></a>';

Ça va recharger la page à chaque "clic" de "changement de sexe".
C'est hyper lourd...

Vaut mieux se mettre à l'AJAX ^^

tleb

Mais pourquoi du AJAX ? Tout ce qu'il y a à faire, c'est du design.

Tu peux utiliser de l'overflow et décaller les options. Celles qui ne sont pas centrés seront cachés.

SLK

Mais comment on fait pour que le système sélectionne des valeurs différentes ?

tleb

Avec du Javascript ! Un petit exemple ici. J'ai utilisé FontAwesome pour les flèches. L'exemple màj un input hidden, pour pouvoir intégrer la donnée dans un formulaire.

Par contre, je te déconseille fortement d'utiliser un système comme ça sur un site. C'est p-ê joli, mais c'est pas sémantique (donc mauvaise accessibilité pour les non-voyants, etc), ça nécessite du JS et on ne peut pas l'utiliser au clavier.

Un type de select différent

6 réponses