Création d'un contrôleur de volume avec le curseur de l'interface utilisateur jQuery

Si vous êtes un chasseur de cadeaux, il y a de fortes chances que vous ayez déjà téléchargé de nombreuses interfaces utilisateur PSD. Certaines sont vraiment étonnantes et pourraient nous faire gagner du temps en prototypant le design sur lequel nous travaillions.

Dans cet article, nous allons coder une interface utilisateur PSD et la transformer en quelque chose de plus fonctionnel. Nous allons coder le slider d'interface utilisateur PSD suivant à appliquer comme thème de slider jQuery UI.

toutefois, Prenez des notes s'il vous plaît que ce tutoriel est destiné à niveaux intermédiaires d'expérience. Cela dit, il est encore relativement facile à suivre, à condition de bien connaître CSS et jQuery..

D'accord, maintenant commençons.

Étape 1: l'interface utilisateur de jQuery

Nous avons évidemment besoin des bibliothèques jQuery et jQuery UI, et nous avons deux options pour les utiliser. Premièrement, nous pouvons lier les interfaces utilisateur jQuery et jQuery directement à partir du CDN suivant: API Google Ajax CDN, Microsoft CDN et jQuery CDN. Il existe de nombreux avantages à utiliser le fichier CDN hébergé lorsque nous mettons notre site en ligne..

Mais comme nous ne travaillerons qu’en mode hors connexion, nous utiliserons le seconde chemin à la place.

Nous allons télécharger et personnaliser la bibliothèque de l'interface utilisateur jQuery à partir de la page de téléchargement officielle. Comme nous avons seulement besoin du plugin Slider, nous ne sélectionnerons que la bibliothèque Slider avec ses dépendances et laisserons les autres. De cette façon, les fichiers que nous utilisons seront beaucoup plus minces et pourront se charger plus rapidement. Après cela, liez toutes ces bibliothèques au document HTML, de préférence au bas de la page ou avant la fermeture. tag pour être exact.

Étape 2: balisage HTML

Le balisage du curseur est très simple, nous avons encapsulé tous les balisages nécessaires - l’info-bulle, le curseur et le volume - à l’intérieur d’un HTML5 section étiquette. L’interface utilisateur jQuery générera alors automatiquement le reste.

Étape 3: Installez l'interface utilisateur du curseur

Le fragment de code ci-dessous installe le curseur sur la page, mais il n’applique que la configuration par défaut..

 $ (function () $ ("#slider") .slider (););

Nous allons donc améliorer un peu le curseur en ajoutant d’autres configurations..

Tout d'abord, nous stockons l'élément slider sous forme de variable.

 var slider = $ ('# slider'),

Ensuite, nous définissons la valeur par défaut minimale du curseur sur environ 35, quand il est chargé pour la première fois.

 slider.slider (plage: "min", valeur: 35,);

À ce stade, nous ne verrons rien dans le navigateur, car l'interface utilisateur de jQuery est fondamentalement, générer uniquement le balisage. Donc, nous devons appliquer certains styles pour commencer à voir le résultat visuellement sur le navigateur.

Étape 4: les styles

Avant de continuer, nous avons besoin de certains éléments du fichier source PSD, tels que la texture de fond et l’icône..

Nous ne parlerons pas de comment trancher dans cet article, nous allons simplement nous concentrer sur le code. Si vous ne savez pas comment trancher, regardez le screencast suivant avant de poursuivre..

Conversion d'une conception de PSD en HTML - Nettuts+

Très bien, commençons maintenant à ajouter les styles.

Nous allons commencer par positionner le curseur au centre de la fenêtre du navigateur et attacher l’arrière-plan que nous avons découpé du PSD au corps.

 body background: url ('… /images/bg.jpg') répéter en haut à gauche;  section width: 150px; hauteur: auto; marge: 100px auto 0; position: relative;

Ensuite, nous appliquerons les styles pour l'info-bulle, le volume, la poignée, le curseur intervalle et le curseur lui-même.

Nous allons faire cette partie par partie, en commençant par…

Curseur

Comme nous n'avons pas défini la valeur maximale du curseur lui-même, l'interface utilisateur de jQuery appliquera la valeur par défaut. C'est 100. Par conséquent, nous pouvons également appliquer 100 (px) pour le curseur largeur.

 #slider border-width: 1px; style de bordure: solide; border-color: # 333 # 333 # 777 # 333; border-radius: 25px; largeur: 100px; position: absolue; hauteur: 13px; couleur de fond: # 8e8d8d; background: url ('… /images/bg-track.png') répéter en haut à gauche; box-shadow: incrément 0 1px 5px 0px rgba (0, 0, 0, 0,5), 0 1px 0 0px rgba (250, 250, 250, .5); à gauche: 20px;

Info-bulle

L'info-bulle sera positionnée au-dessus du curseur en spécifiant son position absolument avec -25px pour son première position.

 .tooltip position: absolute; bloc de visualisation; en haut: -25px; largeur: 35px; hauteur: 20px; couleur: #fff; text-align: center; police: 10 pt Tahoma, Arial, sans serif; border-radius: 3px; bordure: 1px solide # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); taille de la boîte: boîte-frontière; arrière-plan: gradient linéaire (haut, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

Le volume

Nous avons un peu modifié l'icône de volume pour répondre à notre idée. L’idée est que nous allons créer un effet pour élever la barre de volume progressivement conformément à la valeur du curseur. Je suis sûr que vous avez souvent vu un tel effet dans une interface utilisateur de lecteur multimédia.

 .volume display: inline-block; largeur: 25px; hauteur: 25px; à droite: -5px; background: url ('… /images/volume.png') no-repeat 0 -50px; position: absolue; marge supérieure: -5px;

La poignée de l'interface utilisateur

Le style de la poignée est assez simple. il aura une icône qui ressemble à un cercle métallique, découpée dans le PSD et attachée à l'arrière-plan.

Nous allons également changer le mode du curseur en aiguille, de sorte que l'utilisateur remarquera que cet élément est glissable.

 .ui-slider-handle position: absolute; z-index: 2; largeur: 25px; hauteur: 25px; curseur: pointeur; fond: url ('… /images/handle.png') non répétée 50% 50%; poids de police: gras; couleur: # 1C94C4; contour: aucun; en haut: -7px; marge gauche: -12px;

La gamme slider

La plage du curseur aura une couleur dégradée légèrement blanche.

 .ui-slider-range background: linéaire-gradient (haut, #ffffff 0%, # eaeaea 100%); position: absolue; bordure: 0; en haut: 0; hauteur: 100%; border-radius: 25px;

Étape 5: l'effet

Dans cette étape, nous allons commencer à travailler sur l'effet spécial du Slider.

Info-bulle

À ce stade, l'info-bulle n'a pas encore de contenu, nous allons donc la remplir avec la valeur du curseur. De plus, la position horizontale de l'info-bulle correspondra à la position de la poignée.

Tout d’abord, nous stockons l’élément d’info-bulle en tant que variable.

 var tooltip = $ ('. tooltip');

Ensuite, nous définissons l’effet de l’info-bulle que nous avons mentionné ci-dessus à l’intérieur de la diapositive..

 slide: function (event, ui) valeur var = slider.slider ('valeur'), tooltip.css ('left', valeur) .text (ui.value);

Mais nous voulons aussi que l'info-bulle soit d'abord cachée.

 tooltip.hide ();

Après cela, quand le manipuler est sur le point de commencer à glisser, il sera montré avec un effet de fondu.

 start: fonction (événement, interface utilisateur) tooltip.fadeIn ('fast'); ,

Et, lorsque l'utilisateur arrête de faire glisser la poignée, l'info-bulle disparaîtra et sera cachée..

 stop: fonction (événement, interface utilisateur) tooltip.fadeOut ('fast'); ,

Le volume

Comme nous l'avons mentionné ci-dessus dans le Section Styles, nous prévoyons que l'icône du volume change en fonction de la position de la poignée ou pour être exacte, la valeur du curseur. Donc, nous allons appliquer l'instruction conditionnelle suivante pour créer cet effet.

Mais, tout d’abord, nous stockons l’élément de volume ainsi que la valeur du curseur en tant que variable.

 volume = $ ('. volume');

Puis on commence l'énoncé conditionnel.

Lorsque la valeur du curseur est inférieure ou égale à 5 l'icône du volume ne comportera aucune barre, ce qui indique que le volume est très faible, mais lorsque la valeur du curseur augmente, la barre de volume commence à augmenter également.

 si (valeur <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ;

Mettez-les tous ensemble

Très bien, si vous êtes confus avec tout ce qui précède, ne le soyez pas. Voici le raccourci. Mettez tous les codes suivants dans votre document.

 $ (function () var slider = $ ('# slider'), info-bulle = $ ('. tooltip'); tooltip.hide (); slider.slider (plage: "min", min: 1, valeur: 35, démarrer: fonction (événement, interface utilisateur) tooltip.fadeIn ('fast');, diapositive: fonction (événement, ui) var valeur = slider.slider ('valeur'), volume = $ ('. Volume '); tooltip.css (' left ', valeur) .text (ui.value); if (valeur <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); );

Très bien, voyons maintenant le résultat dans le navigateur.

Démo
Source de téléchargement

Conclusion

Aujourd'hui, nous avons réussi à créer un thème d'interface utilisateur jQuery plus élégant, mais nous avons également traduit une interface utilisateur PSD avec succès en un contrôleur de volume fonctionnel..

Nous espérons que ce tutoriel vous inspirera et pourrait vous aider à comprendre comment transformer un fichier PSD en un produit plus utilisable..

Enfin, si vous avez des questions concernant ce tutoriel, n'hésitez pas à les ajouter dans la section commentaires ci-dessous..