L'interface utilisateur de JQuery peut ajouter beaucoup à une page Web. L'interface utilisateur fournit de nombreux widgets différents. Le curseur est une étoile montante. Dans ce didacticiel, je vais vous montrer comment utiliser un curseur pour contrôler la taille du texte d'un article sur une page. Cela permet à l'utilisateur de contrôler exactement la taille qui lui convient et constitue également une fonctionnalité assez impressionnante sur un site.!

La partie curseur de ce didacticiel reproduit une technique créée à l'origine par Buck Wilson..

Notre objectif

Nous voudrons éventuellement que notre page ressemble à ceci:

Comportement:

• Lorsque le curseur est déplacé, une bulle apparaît en fondu, indiquant la taille actuelle.
• Le texte "taille actuelle du texte" apparaîtra également avec la taille actuelle du texte à côté.
• Nous essaierons également d’augmenter le texte d’un texte ou de le réduire d’un pixel au clic du signe plus ou moins..

Étape 1: Obtenir les fichiers Javascript nécessaires

Nous avons évidemment besoin de JQuery, mais nous allons aussi avoir besoin de fichiers d'interface utilisateur pour étendre JQuery. Vous pouvez obtenir un fichier d'interface utilisateur personnalisé selon nos besoins sur la page Créer votre téléchargement de l'interface utilisateur JQuery..

Comme vous pouvez le constater, il existe de très bons effets sonores! Aussi tentant que cela puisse paraître, nous n'avons pas besoin de tous ces effets pour obtenir le produit souhaité. Tout ce dont nous avons besoin est:

• UI Core
• Curseur
• Le plugin Cookie de Klaus Hartl

Étape 2: le HTML

Pour ce tutoriel, je ne vais pas perdre de temps à expliquer les bases du HTML et à créer une mise en page à l'aide de CSS. Si vous souhaitez en savoir plus à ce sujet, vous trouverez d'autres didacticiels tels que mon didacticiel sur le panneau supérieur ou le didacticiel sur le contenu tabulé de Collis..

            
 
 
 
 
 
 
 
 
 
 
 
Curseur de taille de texte
 
Taille de police actuelle:  
 
 Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un spécimen. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la publication de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec un logiciel de publication assistée par ordinateur comme Aldus PageMaker, comprenant des versions de Lorem Ipsum.. 
 
   

Donc, vous remarquerez plusieurs choses:

1. Le correctif PNG pour IE 5.5 et 6. Je me suis directement lié à la page de code de Google. Cela signifie que je devrai terminer chaque PNG transparent avec un -trans.png .
2. J'ai également lié directement à JQuery et à notre fichier d'interface utilisateur personnalisé.
3. J'ai mis les balises nécessaires pour le curseur dans l'en-tête

REMARQUE: Pour que le curseur fonctionne, il faut une barre et une poignée..

Étape 3: le CSS

Voici le CSS pour rendre cette page un peu meilleure. Cette page est assez simple, et donc le CSS est assez simple aussi:

 corps background: # 373737; text-align: center; marge: 0px;  #header width: 700px; hauteur: 200px; background: # 48887d url (images / header.jpg); marge gauche: auto; marge droite: auto; position: relative;  .slider_container position: absolute; hauteur: 25px; en haut: 170px; à gauche: 165px;  .minus background: url (images / minus-trans.png) no-repeat; hauteur: 9px; largeur: 25px; débordement caché; float: gauche; curseur: pointeur;  .slider_bar background: url (images / bar-trans.png) no-repeat; hauteur: 9px; largeur: 316px; float: gauche; marge: 0px 5px; position: relative;  .add background: url (images / add-trans.png) no-repeat; hauteur: 25px; largeur: 23px; float: gauche; position: relative; en haut: -5px; curseur: pointeur;  .slider_handle background: url (images / selector-trans.png) no-repeat; hauteur: 25px; largeur: 12px; position: absolue; en haut: -8px;  #slider_caption background: url (images / caption-trans.png) no-repeat; hauteur: 45px; largeur: 38px; débordement caché; position: absolue; en haut: -50px; marge gauche: -10px; remplissage: 5px 0px 0px 0px; famille de polices: "Myriad Pro"; couleur: # 36665d; poids de police: gras; text-align: center;  #text font-family: Helvetica, Arial, sans-serif; largeur: 655px; arrière-plan: # f9f9f9; marge gauche: auto; marge droite: auto; remplissage: 20px 20px 20px 25px; position: relative;  #text p font-size: 12px; text-align: left; la couleur noire;  #text h1 text-align: left; marge gauche: 20px;  p font-family: Arial, Helvetica, sans-serif; couleur: #CCCCCC;  #font_indicator position: absolute; à droite: 100px; en haut: 50 px; taille de police: 10px; affichage: aucun;  

Encore une fois, je ne vais pas entrer dans les détails avec le CSS non plus. Si vous avez encore besoin d'aide, assurez-vous de consulter ces deux tutoriels que j'ai mentionnés ci-dessus. Si vous avez des questions, n'hésitez pas à me le faire savoir dans les commentaires..

Notez que toutes les images png qui ont une transparence alpha ont une fin -trans.png.

Étape 4: Effets de base du curseur

Lorsque je me suis renseigné pour la première fois sur l’effet de curseur, je l’ai cherché sur Google pour en savoir un peu plus sur lui et son fonctionnement. Eh bien, j’ai eu de la chance de trouver cet incroyable screencast. Cela a également eu un effet vraiment soigné; une légende qui semblait afficher la position du curseur, en haut du curseur. Malheureusement, ils se sont arrêtés là. Nous allons utiliser une variante de leur code JQuery comme point de départ:

 $ (function () $ ('# slider_caption'). hide (); var captionVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValeur: 0, maxValue : 100, début: fonction (e, ui) $ ('# slider_caption'). FadeIn ('fast', fonction () captionVisible = true;);, arrêt: fonction (e, ui) if ( captionVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () captionVisible = true;); $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). animate (fontSize: ui.value * 15/100 + 8 ) .fadeIn ("slow"); $ ('# slider_caption'). fadeOut ('fast', function () captionVisible = false;);, slide: function (e, ui) $ ('# slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"););

Quelques idées clés:

• Tout d'abord, nous masquons la légende avec Javascript. Cela rend la légende visible si Javascript est désactivé pour un peu plus d'accessibilité.
• Comme vous pouvez le constater, nous avons maintenant un modificateur .slider et plusieurs sous-éléments:
  • startValue: Ceci spécifie la position à partir de laquelle la poignée commence
  • valeur minimale: Ceci spécifie la valeur minimale à laquelle le handle ira
  • Valeur max: Ceci spécifie la valeur maximale que le handle va atteindre
  • début: Cela nous permet de dire à JQuery ce qu'il faut faire lorsque l'utilisateur commence à faire glisser la barre
  • Arrêtez: Ceci spécifie ce qui se passe lorsque le curseur est relâché
  • faire glisser: Cela spécifie ce qui se passe lorsque le curseur est en train de glisser
  • manipuler: Cela nous permet de spécifier quelle sera la poignée
• Nous affectons également une variable qui nous aidera à savoir, quand Arrêtez: se produit, que la légende soit visible ou non, puis effectuez une action en fonction de cette conclusion.
• Nous devions également limiter les tailles de police possibles. Nous avons donc limité les possibilités de valeur du curseur entre 8 et 23. Nous l'avons fait en effectuant des calculs de base sur la valeur du curseur. (multiplié par 15/100 et ajouté 8)
• Cette équation donnait des décimales, nous avons donc dû l’arrondir en Math.round
• Notez également que la méthode utilisée pour que la légende reste au-dessus de la poignée. Nous avons fait la valeur css gauche de la légende égale à la poignée.
• Notez que sur le Arrêtez: J'ai la taille du texte animé, alors que sur la diapositive, la taille du css change constamment. Cela peut sembler contre-intuitif, cela sur faire glisser: Je ne voudrais pas l'animer, mais par l'essence de glisser et d'agrandir progressivement la taille, il fait la même chose. Si je devais animer au lieu de changer simplement le css, ce serait saccadé et insensible.

Étape 5: Ajout de la légende de texte

 $ (function () $ ('# slider_caption'). hide (); var calloutVisible = false; $ ('. slider_bar'). slider (handle: '.slider_handle', startValue: 26, minValeur: 0, maxValue : 100, start: function (e, ui) $ ('# slider_caption'). FadeIn ('fast', function () calloutVisible = true;); $ ('# # font_indicator'). FadeIn ('slow' );, arrêter: fonction (e, ui) if (calloutVisible == false) $ ('# slider_caption'). fadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator '). fadeIn (' slow '); $ (' # slider_caption '). css (' left ', ui.handle.css (' left ')). text (Math.round (ui.value * 15/100 + 8)); $ ('# font_indicator b'). Text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). Animate (fontSize: ui.value * 15/100 + 8). FadeIn ("slow"); $ ('# slider_caption'). FadeOut ('fast', function () calloutVisible = false;); $ ('# # font_indicator'). fadeOut ('slow');, slide: fonction (e, ui) $ ('# slider_caption'). css ('left', ui.handle.css ('left')). text (Math.round ( ui.value * 15/100 + 8)); $ ('# font_indicator b'). text (Math.round (ui. valeur * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8). fadeIn ("slow"); );

Idées clés sur #font_indicator

• Nous avons ajouté les mêmes effets de fondu enchaîné aux mêmes endroits que la légende.
• Nous avons laissé de côté la position css gauche bien
• Notez que nous avons un balise dans le div # font-indicateur. Cela rend non seulement le nombre plus visible, mais nous permet également de mettre la valeur actuelle de la poignée du curseur sous forme de texte. Si nous venions d’ajouter à la fin de la div, chaque valeur de taille de police s’empilerait à la fin.

Étape 6: Donner les actions plus et moins

Ce ne serait tout simplement pas une conception fonctionnelle, si nous ne donnions pas les actions des signes plus et moins au clic. Ce code est peut-être un peu bâclé et pas parfaitement efficace, mais il fait le travail. Ce projet a nécessité une quantité surprenante de calculs, ce qui explique certains des chiffres loufoques qui finissent par être utilisés.

Sans plus tarder, voici le reste du javascript, je l'expliquerai plus tard:

 $ (". add"). click (function () var currentFontSize = $ ('# texte p'). css ('font-size'); var currentFontSizeNum = parseFloat (currentFontSize, 10); var newFontSize = currentFontSizeNum + 1; if (newFontSize < 24)  $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow');  else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow');  return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# texte p'). Css ('font-size', newFontSize); $ ('# slider_caption'). css ('left', newFontSize * 19.75 - 158) .fadeIn ('fast'). text (Math.round (newFontSize)). fadeOut (); $ ('. slider_handle'). css ('left', newFontSize * 19.75 - 158); $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text (Math.round (newFontSize)); $ ('# font_indicator'). fadeOut ('slow');  else $ ('# font_indicator'). fadeIn ('slow'); $ ('# font_indicator b'). text ("N'est-ce pas assez petit?"); $ ('# font_indicator'). fadeOut ('slow');  return false; );

Quelques notes clés:

• Si vous connaissez la syntaxe Javascript de base, cela devrait être assez évident.
• J'attribue une variable initiale pour obtenir la taille de police actuelle.
• Je le convertis ensuite en entier
• Je crée ensuite une autre variable d'une valeur supérieure.
• Je place une limite entre moins de 24 ans et plus de 8 ans, en utilisant un sinon déclaration.

Temps de maths

Ajuster la poignée et la légende pour réagir au clic plus et moins était un véritable défi. Ce que j’ai fini par faire, c’était de déterminer la largeur de la barre (316 pixels) et de le diviser entre les 16 tailles de police possibles (8-23) pour déterminer l’espace requis par chaque incrément..

316/16 =

Pour être en sécurité, je devais ensuite déterminer le point de départ de la taille de la police. Je savais que ce n'était pas exactement 12, car je l'ai légèrement modifié avec le 15/100 + 8. J'ai donc pris la valeur de départ de la poignée (26) et multipliée par celle-ci:

26 * 15/100 + 8 =

Je pensais que, puisqu'il était arrondi, il serait quand même douze.

J'ai donc pensé que la poignée serait la [taille de la police * 19.75 - 158 (les 8 premières tailles)] px.

Je pensais juste que je vous donnerais un aperçu de mes calculs étranges et compliqués;). Il existe probablement des moyens beaucoup plus simples de le faire, mais je suppose que c'est ma logique.

Étape 7: Heure du cookie, lecture du cookie

Pour gérer les cookies, j'ai utilisé l'excellent plug-in de cookie de Klaus Hartl. Vous pouvez voir la syntaxe de base du plugin dans le lien que j'ai fourni. Le défi consistait à trouver un endroit qui définisse le cookie de manière fiable. J'ai fini par le configurer lorsque le navigateur actualise ou modifie la page. De cette façon, il ne le fait que lorsque cela est nécessaire et réaliste. Tout d'abord, nous ajoutons le code en haut du fichier javascript pour lire le cookie:

 var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p'). css ('font-size', startSize);

Ce que j'ai fait:

• J'ai d'abord lu le cookie et l'ai envoyé à la variable startSize
• J'ai ensuite changé cette variable en un entier
• J'ai ensuite ajouté ce nombre au fichier css par défaut du texte.

Étape 8: Configuration du cookie

Comme je l'ai mentionné ci-dessus, nous devons définir le cookie lorsque vous quittez la page. Nous faisons cela en utilisant le code suivant:

 window.onbeforeunload = leaveCookie; function leaveCookie () var FontSize = $ ('# texte p'). css ('font-size'); var IntFontSize = parseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); 

Ce que j'ai fait:

• NOTE: Ce JS est à l'extérieur de la JQuery $ (function () );
• D'abord, j'ai activé une fonction lorsque le navigateur a quitté la page
• Puis j'ai converti la taille du texte en un entier
• Puis je mets ça dans le cookie
  

C'est tout!

J'espère que vous avez trouvé ce tutoriel utile! S'il vous plaît excuser ma logique de programmation, je ne pense pas toujours aussi efficacement: P. Si vous avez des questions ou des commentaires, n'hésitez pas à me le faire savoir dans les commentaires.!

• Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.

Code