Styliser certains éléments standard est une tâche assez simple.Bien sûr, un bon spécialiste peut styliser n'importe quoi, mais tout dépend de la complexité de cette action.Il faudra pas mal de temps pour styliser les boutons radio et les cases à cocher - l'idée de styliser une étiquette avec une entrée cachée n'est pas nouvelle et a longtemps été utilisée partout.Pour styliser le reste - il y a du JavaScript.Aujourd'hui, je veux vous expliquer comment il est relativement simple de créer des listes déroulantes avec un code JavaScript minimal (de 0 à 26 lignes) et un balisage HTML supplémentaire minimal.
L'autre jour, comme cela arrive souvent, j'ai eu besoin de créer une liste déroulante. Cependant, il n'est devenu une liste déroulante que dans la version mobile, avant de se comporter comme le groupe de boutons radio le plus ordinaire.Et donc, quand j'avais presque fini d'écrire une autre construction effrayante conçue pour remplacer le malheureux Select, j'avais une question:pourquoi?Habituellement, cette question conduit à une sage procrastination, à repenser la vie, etc., mais cette fois quelque chose a mal tourné, et j'ai réalisé que la question était vraiment bonne et, surtout, utile.
Un petit programme éducatif:Donc, pour ceux qui sont dans le réservoir, ainsi que pour ceux à qui les listes déroulantes causent tellement de douleur qu'ils ont décidé de les oublier comme un cauchemar, je vais légèrement (vraiment) vous rappeler ce que c'est.Les listes déroulantes se composent de 2 éléments principaux :- Sélectionner - conteneur pour toute la liste
- Option - élément de liste
Parfois, OptGroup est également utilisé (un groupe d'éléments de liste), mais son implémentation reste jusqu'à présent en JavaScript.La fonctionnalité principale de la liste déroulante consiste à envoyer des informations sur les éléments sélectionnés au serveur.Pour être complet, voici une liste d'attributs d'élément (afin que vous puissiez estimer combien d'entre eux seront mis en œuvre):- Sélectionner - désactivé , formulaire , multiple , nom , requis , taille
- Option - désactivé , étiquette , sélectionné , valeur
Sur ce point, nous terminerons peut-être par la description et passerons à la mise en œuvre .
Beaucoup de mots ont déjà été écrits, donc - plus près du code:<form>
<div class="content">
<h3 class="title"> 0 </h3>
<input id="selectName0" type="radio" value="0" name="selectName" />
<label for="selectName0"> 0 </label>
<input id="selectName1" type="radio" value="1" name="selectName" />
<label for="selectName1"> 1 </label>
<input id="selectName2" type="radio" value="2" name="selectName" />
<label for="selectName2"> 2 </label>
</div>
</form>
Alors, à quoi sert ce code? (tout ce qui peut être supprimé pendant l'explication a été supprimé spécialement)Notons quels éléments de la fonctionnalité Sélectionner et Option sont devenus automatiquement possibles, en raison de l'utilisation de l'entrée + étiquette:- Sélectionnez - formulaire, nom, requis
- Option - désactivé, étiquette, sélectionné, valeur
Et c'est tout ce qui reste à mettre en œuvre:- Sélectionner - désactivé, multiple, taille
- Option - entièrement mise en œuvre
En ajoutant simplement les bundles input + label, nous avons réduit la liste des fonctionnalités nécessaires de 10 à 3. Pas mal, mais ce n'est pas la fin, non?Pour implémenter l'élément Select.multiple (choix multiple), procédez comme suit :<form>
<div class="content">
<input id="selectName0" type="checkbox" value="0" name="selectName" />
<label for="selectName0"> 0 </label>
<input id="selectName1" type="checkbox" value="1" name="selectName" />
<label for="selectName1"> 1 </label>
<input id="selectName2" type="checkbox" value="2" name="selectName" />
<label for="selectName2"> 2 </label>
</div>
</form>
Nous changeons simplement le type d' entrées de Radio en Checkbox , et obtenons un analogue presque complet de multiples .La différence est que pour une sélection multiple, vous n'avez pas besoin de maintenir la touche Ctrl enfoncée (enfin, si quelqu'un veut imiter complètement la fonctionnalité - JavaScript pour vous aider).Ce qui reste?- Sélectionner - désactivé, taille
- Option - entièrement mise en œuvre
Eh bien, Select.disabled et Select.size sont extrêmement simples à implémenter en utilisant CSS:- Select.size - quelle taille vous définissez sera. Vous avez juste besoin d'ajouter le conteneur.
- Select.disabled - pour le conteneur, vous devez ajouter des événements de pointeur: aucun pour annuler la réaction aux actions de l'utilisateur (survol, clics, etc.), eh bien, vous pouvez le rendre un peu transparent.
Ainsi, la fonctionnalité principale est. Que manque-t-il?Vous devez également ajouter l'en- tête de saisie semi-automatique pour le menu déroulant avec le seul choix, et il y aura également un problème lors de la réinitialisation du formulaire (bouton Réinitialiser ), le titre ne sera pas réinitialisé. Mais même cela est complètement résoluble (en utilisant JavaScript).
Et maintenant - exemples:Une petite implémentation (menu déroulant avec un seul choix):Et un peu plus (pas un menu déroulant à choix multiples):Bonus: je ne sais pas pourquoi j'ai fait ça, mais ... un menu déroulant avec un seul choix et une réinitialisation d'en-tête basée sur CSS:
Pourquoi est-ce nécessaire?Étant donné qu'à en juger par les commentaires, tout le monde ne comprend pas pourquoi ce code sera utile, je considère qu'il est nécessaire de donner quelques éclaircissements.Lors de la création de listes déroulantes du formulaire:<select>
<option> 1</option>
<option> 2</option>
</select>
Il existe de sérieuses limitations de style. Par conséquent, ils sont remplacés par de simples listes:<ul>
<li> 1</li>
<li> 2</li>
</ul>
avec lequel toutes les fonctionnalités nécessaires sont accrochées en utilisant JavaScript.Étant donné qu'au départ, les listes n'interagissent pas avec les formulaires , cela pose des problèmes.Non seulement il est nécessaire de mettre en œuvre toutes les fonctionnalités de base:- points de commutation et leur interaction
- état (vérifié, désactivé)
- liaison au formulaire et envoi de données au serveur
- initialisation des données initiales (remplissage automatique)
- réinitialisation du formulaire (lorsque vous cliquez sur le bouton "réinitialiser", la liste doit être remise à l'état lors de l'initialisation)
En fait, si quelque chose se casse dans JavaScript, cela n'a pas d'importance, car le script ne s'est pas chargé, un bug est survenu, a apporté des corrections - en cas de problème, la liste déroulante se transforme en ... quelque chose qui ressemble à une liste déroulante, mais ne fonctionne pas.
Généralement. En aucune façon.Pour l'utilisateur, cela ressemblera à ceci: il y a une liste déroulante, mais vous ne pouvez pas travailler avec.Pour le serveur, cela sera encore plus «amusant» - un formulaire est arrivé dans lequel il n'y a pas assez de données. C'est bien qu'une telle situation ait été prévue à l'avance pendant le développement ... Après tout, elle était prévue, non?
Avantages de la solution résultante:- ( ), . JavaScript ( ). , — . , — / — html ( JS), .
- . , , ( ). ul — li , .
(. , , JavaScript' / ):- tab
- ( select -)
- ( , )
- select ( select . select)
- , (JS )
- ( OptGroup) (, )
Comme vous pouvez le voir, aucun des inconvénients ci-dessus n'est critique pour la grande majorité des listes, et si nécessaire est implémenté en utilisant JavaScript, et donc ...
Bienvenue dans le monde où vos bibliothèques pour styliser les listes de type Select-Option deviendront un peu plus petites, et travailler avec ces listes sans bibliothèques sera presque confortable!
UPD: comme il s'est avéré, dans le cas des cases à cocher, l'attribut requis ne fonctionne pas correctement, et il doit également être émulé à l'aide de JavaScript (pour le moment, toutes les cases à cocher marquées comme obligatoires sont obligatoires, et seulement elles)