Conception d'une liste déroulante de sélection dans Photoshop. Plugin JQuery pour les sélecteurs de style. Code HTML après l'exécution du plugin
Très souvent, les concepteurs dessinent des mises en page avec des éléments de formulaire non standard, c'est-à-dire La conception des cases à cocher, des boutons radio, des entrées et des sélecteurs diffère de ce que le navigateur affiche par défaut. Ainsi, le concepteur de mise en page est confronté à la tâche de personnaliser la conception, y compris certains éléments.
Dans cet article, nous verrons comment changer apparence sélectionner Cependant, nous adhérerons à l’idéologie suivante. Il est logique de personnaliser uniquement l'état réduit par défaut du sélecteur, et la conception de la liste déroulante doit rester standard. Par conséquent, la solution décrite ci-dessous ne fonctionnera pas si vous avez besoin d'une liste déroulante complexe, par exemple avec des icônes ou des cases à cocher pour chaque option.
En revanche, cette approche permet :
1. N'écrivez pas code javascript, qui émulerait le comportement des sélecteurs. Toute la logique repose sur le navigateur. Il existe de nombreux plugins aujourd'hui, mais vous n'en rencontrez pas souvent un qui gérerait tous les cas extrêmes que l'utilisateur rencontre lorsqu'il interagit avec ce contrôle. Un exemple de ceci dernier recours peut servir sélection automatique position de la liste déroulante (ouverture vers le bas ou vers le haut).
2. Puisque le navigateur est responsable du comportement et de la conception de la liste déroulante, il n'est pas nécessaire d'écrire quoi que ce soit. solution séparée Pour appareils mobiles, ce qui vous permettrait de travailler facilement avec des sélecteurs sur des appareils tactiles dotés de petits écrans. Les sélecteurs natifs intégrés eux-mêmes acceptent le bon type, parce que sur plateformes mobiles tout a déjà été pensé. Par exemple, Utilisateurs iOS lorsque vous cliquez sur le sélecteur, ils ne verront pas votre liste personnalisée, mais la liste familière standard. Les utilisateurs n'auront pas besoin d'adapter leur comportement à votre site spécifique ; leur comportement sera le même que sur tous les autres sites. Et c’est pratique pour lui, et c’est pour cette raison que vous avez créé le site.
Ainsi, comme déjà mentionné, les propriétés CSS3 suffisent à concevoir la sélection.
La propriété principale qui vous permettra de modifier l'apparence du sélecteur est l'apparence . Cela force un élément à devenir ce que vous voulez, par exemple vous pouvez forcer un div à devenir un bouton. Cependant, pour nos besoins, la valeur intéressante est none , ce qui signifie que l'élément n'a pas du tout besoin d'être stylisé. De cette façon, nous pouvons supprimer l'attribut spécifique à la sélection - la flèche vers le bas à droite.
Sélectionnez ( -webkit-apparence : aucune ; -moz-apparence : aucune ; -ms-apparence : aucune ; apparence : aucune !important; )
Comme vous pouvez le voir, supprimer la flèche n'a pas été difficile ; il ne reste plus qu'à ajouter quelques propriétés CSS triviales comme le cadre, la police, etc. Ici, bien sûr, vous pouvez ajouter des coins arrondis, des ombres, etc., tout comme le concepteur l'a dessiné dans la mise en page. La liste déroulante principale reste native.
Sélectionnez (arrière-plan : transparent ; affichage : bloc ; largeur : 100 % ; bordure : 1px solide #a7a7a7 ; couleur : #32353a ; famille de polices : 16/Arial, sans-serif ; taille de police : 16px ; hauteur de ligne : 1,4 ; font-weight : normal ; remplissage : 7px 7px 10px ; vertical-align : top ; -webkit-apparence : aucun !
Il ne reste plus qu'à ajouter une flèche ou une autre icône comme arrière-plan. Nous utiliserons l'arrière-plan, car les pseudo-éléments comme avant et après ne fonctionneront pas pour la sélection. Pour meilleur affichage des sites sur divers appareils avec différentes densités de pixels, à diverses échelles etc. Il est courant d'utiliser des icônes SVG. Par conséquent, en utilisant un encodeur d’URL en ligne pour SVG, nous convertirons l’icône en URI de données. Il est important de rappeler que la balise SVG doit avoir l'attribut xmlns="http://www.w3.org/2000/svg".
Vous obtiendrez le résultat suivant.
%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" règle de remplissage ="pairimpair" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A
Étant donné que la flèche utilisée n'est pas standard, vous pouvez la déplacer vers la gauche ou utiliser n'importe quelle autre image à la place de la flèche, ou vous pouvez vous passer complètement d'icônes.
Attention! Développement ultérieur et la prise en charge du plugin a été arrêtée car il fait désormais partie de .
L’une des choses les plus désagréables (et je dirais même terribles) dans le développement Web est la mise en page des formulaires HTML. Malheureusement, il n'existe pas de norme uniforme pour l'affichage des éléments de formulaire, quel que soit le navigateur et le navigateur. système opérateur, tout comme il n'existe aucun moyen de personnaliser certains de ces éléments à l'aide de tableaux en cascade styles.
Les éléments de formulaire HTML suivants ne peuvent pas être entièrement stylisés :
- liste déroulante ;
- case à cocher ;
- changer .
- champ pour envoyer un fichier.
Comme le montre déjà clairement le titre de l’article, nous ne parlerons ici que des sélections.
Il existe de nombreuses solutions prêtes à l'emploi sous la forme de plugins jQuery pour styliser les listes déroulantes. Mais j'ai (du fait qu'aucun des plugins ne me convenait pour une raison ou une autre) j'ai décidé de réinventer ma propre roue et j'ai écrit mon propre plugin, que je partage dans cet article.
Je voudrais souligner tout de suite que ce plugin ne convient pas à tous les cas possibles d'utilisation des sélections (lire les inconvénients).
Démonstration du pluginVous pouvez voir un exemple de style de sélecteur en utilisant mon plugin. Je les ai conçus sans utiliser d'images.
Avantages- Lorsque JavaScript est désactivé, les sélecteurs standard sont affichés.
- Le script est de petite taille, environ 4 kilo-octets.
- Fonctionne dans IE6+ et tous les navigateurs de bureau modernes.
- Affiché en ligne.
- Facilement stylisé en utilisant CSS.
- Vous permet de définir hauteur maximale pour une liste déroulante (propriété CSS max-height).
- Ajuste automatiquement la largeur si elle n'est pas spécifiée.
- Prend en charge le défilement de la molette de la souris.
- Possède un « positionnement intelligent », c'est-à-dire ne s'en va pas partie visible pages lors de l’ouverture de la liste.
- Peut « attraper » en appuyant sur la touche Tab et basculer avec les flèches du clavier.
- Prend en charge l'attribut "désactivé".
- Il fonctionne également avec les sélections ajoutées/modifiées dynamiquement.
- Ne prend pas en charge l'attribut multiple, c'est-à-dire ne permet pas de sélectionner plusieurs éléments (sélection multiple).
- Ne prend pas en charge le regroupement d'éléments de liste (balise).
- Ne prend pas en charge la commutation avec les touches fléchées du clavier lorsque la liste est ouverte en cliquant sur la souris.
Le plugin n'est pas disponible car ce n'est plus d'actualité.
Plugin jQuery « SelectBox Styler »Version : 1.0.1 | Téléchargements : 11103 | Taille : 7 Ko | Dernière mise à jour: 07.10.2012
Mises à jour 22/09/2012 Conversion du script en plugin (y compris une version réduite) et ajout également de la prise en charge de l'ajout/modification dynamique des sélections. 10/07/2012 Correction du comportement du script lors de l'utilisation de la méthode onchange du tag. Connecter le pluginSi jQuery n'est pas encore activé sur le site, ajoutez ligne suivante avant la balise :
Immédiatement après jQuery, incluez le fichier avec le script :
(fonction($) ( $(fonction() ( $("select").selectbox(); )) ))(jQuery)
Placez ce code avant la balise après les fichiers ci-dessus.
À changement dynamique Les sélecteurs doivent exécuter un déclencheur d'actualisation, par exemple :
(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5)").attr("selected ", true); $("select").trigger("refresh"); )) )) ))(jQuery)
Code HTML après l'exécution du pluginSa structure ressemble à ceci :
-- Sélectionner --
- -- Sélectionner --
- Point 1
- Point 2
- Point 3
Pour émettre des sélections avec en utilisant CSS, utilisez les classes suivantes :
| .selectbox | conteneur parent pour l'ensemble de la sélection |
| .selectbox .select | sélectionner à l'état réduit |
| .selectbox.focused .select | se concentrer sur la sélection lorsque la touche Tab est enfoncée |
| .selectbox .select .text | balise imbriquée pour la sélection réduite en cas d'insertion image de fond en utilisant la technique de la porte coulissante |
| .selectbox .trigger | côté droit de la sélection réduite (commutateur conditionnel) |
| .selectbox .trigger .arrow | sous-balise pour le bouton radio (flèche) |
| .selectbox .dropdown | wrapper pour la liste déroulante |
| .selectbox .dropdown ul | liste déroulante |
| .selectbox li | sélectionner un élément (option) |
| .selectbox li.sélectionné | sélectionné sélectionner un élément |
| .selectbox li.disabled | désactivé (non disponible pour la sélection) sélectionner un élément |
Créer un tel script est une tâche assez fastidieuse, car il faut prendre en compte de nombreux points différents. J'espère vraiment qu'aucun bug sérieux n'apparaîtra. Mais si quelque chose se produit, n'hésitez pas à me le faire savoir dans les commentaires.
Connecter Fichier CSS dans la section d'en-tête :
.. ..
Si vous souhaitez utiliser un thème différent, n'oubliez pas de copier le fichier CSS dans votre dossier de projet.
Appliquer un style à SélectionnerLorsque vous utilisez EasyDropDown.js, votre balisage reste clair et intuitif. Il vous suffit d'ajouter élément normal sélectionner . Vous pouvez également désactiver cet élément, attribuez une étiquette et désignez l'élément qui doit être sélectionné par défaut.
Pour styliser un élément, attribuez-lui simplement la classe déroulante. Voici un exemple :
Réglage Option 1 Option 2 Option 3 Option 4 Option 5
C'est tout, vous n'avez besoin de rien d'autre. Maintenant, votre élément SELECT sera plus joli.
Si vous devez initialement sélectionner un élément, utilisez l'attribut sélectionné. DANS dans ce cas Nous vous déconseillons d'utiliser l'étiquette, car... L'affichage peut être légèrement déformé.
... Option 2 ...
Vous pouvez également désactiver un élément en ajoutant l'attribut désactivé :
...
Choisir un thèmeLe plugin EasyDropDown.js est livré avec 2 thèmes de style : Metro et Flat. Pour les connecter, utilisez l'attribut HTML5 data-attribute.
Pour appliquer un thème différent, à l'intérieur de l'élément SELECT, écrivez data-settings="("wrapperClass":"theme-name")" . Le paramètre theme-name peut prendre les valeurs suivantes : metro ou flat . Exemples :
...
Avec l'avènement de CSS3, il est devenu possible de faire beau style pour tout élément du site. Parce que CSS3 offre un large éventail de fonctionnalités qui accélèrent le processus de développement de la conception d'un site Web. Aujourd'hui, nous allons styliser l'élément select en CSS. Pour ceux qui ne le savent pas, cet élément est responsable de la liste déroulante du site. Beaucoup de gens utilisent vue standard, mais il peut être modifié pour l'adapter à la conception de votre site.
Il n’y a rien de mieux que de voir à quoi ressemble la liste de vos propres yeux :
TéléchargerVoici à quoi ressemble ce Select en CSS :
Articles similaires sur ce sujet :
Je vais maintenant décrire le processus d'installation étape par étape en utilisant cette liste déroulante ou simplement en sélectionnant.
1 étape. Nous connectons les fichiers nécessairesC'est simple. Après avoir téléchargé l'archive avec les sources à partir de là, nous aurons besoin de 2 fichiers (style.css et select.js - si vous connectez la première option de la liste ou select_demo2.js - si vous connectez la deuxième option). Nous connectons ces deux fichiers entre les balises :
| 1 2 |
Il n’y a rien de très complexe dans la structure (et pourquoi devrait-il y en avoir, c’est juste du HTML :)). Formulaire simple, à l'intérieur duquel se trouve une liste déroulante Sélectionner avec ses éléments :
| 1 2 3 4 5 6 7 8 9 10 11 12 | Pays du Royaume-Uni : veuillez sélectionner un pays : Angleterre Irlande du Nord Écosse Pays de Galles |
Il n'y en a pas beaucoup. Je fournis ci-dessous les styles pour la première option de la liste. Je voudrais attirer votre attention sur les chemins d'accès aux images. Il n'y en a que deux : le premier sert à ouvrir la liste et le second à fermer la liste. Ils ressemblent respectivement à deux flèches « vers le haut » et « vers le bas ». Ils peuvent être téléchargés à partir des sources situées en début d'article :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | .dropcontainer ( position : relative ; taille de police : 16px ; couleur : #777 ; ) .trigger ( couleur : #777 ; remplissage : 10px ; taille de police : 16px ; largeur : 50% ; arrière-plan : #fff url () 98 % center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box : tout en 0,5 s de facilité ; -moz-transition : tout en 0,5 s de facilité ; toutes les facilités de 0,5 s ; transition : toutes les facilités de 0,5 s) .trigger : survol ( couleur : #777 ; arrière-plan : #f5f5f5 url (../images/select-arrow-open.png ) 98 % centre sans répétition ; ) . activetrigger ( couleur : #777 ; remplissage : 10px ; taille de police : 16px ; largeur : 50% ; arrière-plan : #f5f5f5 url () 98% centre sans répétition ; affichage : bloc ; bordure : 1px solide #ccc ; -webkit- box-sizing : border-box; ) .activetrigger :hover ( arrière-plan : #f5f5f5 url (../images/select-arrow-close.png ) 98% centre sans répétition ; |
dossier CSS
Vous devez remplacer la dernière propriété dropdownvisible :
| 1 2 3 | .dropdownvisible ( hauteur : auto ; ) |
| 1 2 3 4 | .dropdownvisible ( hauteur : 200px ; overflow-y : scroll ; ) |
Et si vous n’oubliez pas de remplacer les scripts (voir ci-dessus quoi changer par quoi), vous obtiendrez ceci :
Dans quels navigateurs cette sélection CSS (liste déroulante) fonctionne-t-elle correctement ?- ✓Firefox 24.0, Firefox 25.0, Firefox 26.0
- ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
- ✓ Opéra 12.14, Opéra 12.15, Opéra 12.16
- ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
- ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
- ✓ AppleiOS– iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPadMini
- ✓ Android – Sony Expéria X10, HTC Un X, Kindle Fire 2, Google Nexus
En plus de la leçon, je souhaite vous expliquer comment créer un autre effet très inhabituel sur le site : l'effet de survol. Regarde ça courte vidéo et vous verrez tout par vous-même.
ConclusionUn autre élément du site, Select, peut être modifié en fonction de votre conception à l'aide de CSS et Javascript. Il n'y a rien de compliqué dans le processus d'installation, vous réussirez donc. De plus, en complément de l'article, vous recevez manière créative et vidéo d'installation.