Share
Les navigateurs affichent automatiquement une info-bulle lorsque vous fournissez un Titre attribut. Internet Explorer utilisera également l'attribut alt. Mais, dans ce tutoriel, je vais vous montrer comment écrire rapidement un plugin jQuery qui remplacera l'info-bulle du navigateur classique par quelque chose d'un peu plus flashy..
Les info-bulles sont l'un des outils les plus utiles dans notre développement Web. Une infobulle est une boîte
qui apparaît lorsque vous passez votre curseur sur un élément tel qu’un lien hypertexte. Il fournit des compléments
informations sur cet élément. Par exemple, un lien avec peu ou pas de texte (une icône) peut prêter à confusion.
Fournissez une phrase ou deux dans une info-bulle pour expliquer à vos utilisateurs ce qui se passera s’ils cliquent dessus..
Ce tutoriel rentrerait probablement dans la catégorie des intermédiaires. Les instructions supposent que vous avez au moins
une compréhension de base de HTML / CSS, des techniques de découpage et de jQuery.
Si vous avez besoin d'un rappel sur jQuery, voici quelques sites recommandés:
Pour que vous ayez une idée précise des fichiers impliqués dans ce tutoriel, voici à quoi devrait ressembler la structure de fichiers.
comme au moment où vous avez terminé.
Voici un aperçu de chaque fichier / dossier:
Ouvrez Photoshop ou le logiciel de votre choix et créez une infobulle impressionnante. Plutôt que de concevoir
sur un fond blanc uni, il peut être utile d’élaborer votre info-bulle sur un fond similaire à celui de votre site.
De cette façon, il se fondra parfaitement. Pour la plupart, il n'y a pas de bonne ou de mauvaise façon
pour compléter cette étape. Utilisez simplement votre imagination et votre créativité.
Pour cette conception particulière, vous devrez découper l'info-bulle en 3 images différentes. Cette conception particulière nécessitera un PNG pour préserver la transparence.
1) La pièce du haut. 2) Une fine tranche de 1 pixel qui se répète verticalement au milieu. 3) La pièce du bas. La 4ème partie du diagramme ci-dessous montre les trois
morceaux après qu'ils ont été découpés.
Placez ces fichiers image dans un dossier nommé "images".
Remarque: Internet Explorer n’aime PAS la transparence PNG. Même IE 7 ne le supporte que partiellement. Si vous animez un
PNG avec JavaScript, toute zone transparente devient momentanément noire en mouvement. J'utilise ce design
sachant très bien qu'il aura des problèmes dans IE qui sont difficiles à contourner.
Avec les images découpées en tranches, nous pouvons passer aux balises HTML et CSS. Ce sera la partie la plus facile de l'ensemble
Didacticiel.
Ce balisage HTML sera bientôt déplacé dans un fichier JavaScript externe, il suffit donc de le taper dans n'importe quoi
est le plus pratique et peut être consulté plus tard.
Il ya trois div Mots clés. Deux imbriqués dans un parent. La première div, "tip" sera utilisé pour tout tenir ensemble
et afficher la partie supérieure de l'info-bulle, tipTop.png.
"tipMid" finira par contenir le texte que l'info-bulle affichera. Il aura aussi tipMid.png en répétant verticalement à l'intérieur.
"tipBtm" est uniquement là pour afficher la partie inférieure de l'info-bulle, tipBtm.png.
À l'intérieur de index.html, ajoutez un tas de texte de remplissage et quelques éléments avec leurs attributs de titre renseignés. Tel que:
Ceci est un lien
À la tête de index.html, vous devrez créer un lien vers la feuille de style et les deux fichiers JavaScript.
Le CSS utilisé pour cette info-bulle est relativement simple, il suffit d’ajouter ce qui suit à style.css
.pointe largeur: 212px; rembourrage en haut: 37px; affichage: aucun; position: absolue; background: url transparent (images / tipTop.png) haut non répété; .tipMid background: url transparent (images / tipMid.png) repeat-y; padding: 0 25px 20px 25px; .tipBtm background: url transparent (images / tipBtm.png) no-repeat bottom; hauteur: 32px;
Laissez-moi expliquer ce qui précède.
L'élément d'habillage, .tip, est utilisé pour tout tenir ensemble. Il a un remplissage supérieur de 37 pixels.
C'est la hauteur de l'image en arrière-plan. Le rembourrage poussera les éléments enfants vers le bas pour révéler
l'image derrière. Il a également une position absolue afin que nous puissions le déplacer en haut de la page
contenu.
Les deux autres classes ont simplement une image d’arrière-plan et, dans le cas de .topMid, un remplissage pour donner le
contenu qui sera placé à l'intérieur, un peu de place pour respirer.
jQuery est assez cool en soi. Mais la vraie magie réside dans son extension avec un plugin. Quand vous mettez votre
code dans un plugin, vous le rendez réutilisable. De cette façon, vous pouvez construire une bibliothèque de code et ne jamais écrire
le même code deux fois.
Voici le plugin tooltip dans son intégralité:
$ .fn.betterTooltip = fonction (options) / * Configure les options de l'info-bulle accessible de l'extérieur du plugin * / var default = speed: 200, delay: 300; var options = $ .extend (valeurs par défaut, options); / * Crée une fonction qui construit le balisage de l'info-bulle. Ensuite, ajoutez l'info-bulle au corps * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ()); / * Donnez à chaque élément de la classe associée au plugin la possibilité d’appeler l’info-bulle * / $ (this) .each (function () var $ this = $ (this); var tip = $ ('. tip'); var tipInner = $ ('. tip .tipMid'); var tTitle = (this.title); this.title = ""; var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ this.width (); var tHautight = $ this.height (); / * Passez la souris sur et les fonctions de sortie * / $ this.hover (function () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, function () stopTimer (); tip.hide ();) ; / * Retarder l'animation en fondu de l'info-bulle * / setTimer = function () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = function () clearInterval ($ this. showTipTimer); / * Positionne l'info-bulle par rapport à la classe associée à l'info-bulle * / setTip = fonction (haut, gauche) var topOffset = tip.height (); var xTip = (left-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top' : yTip, 'left': xTip); / * Cette fonction arrête le chronomètre et crée l'animation d'ouverture en fondu * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "toggle", default.speed); ); ;"+""+""+"
Maintenant que vous avez vu à quoi ressemble le code, il est temps de le disséquer..
Pour commencer, créez un fichier .js et nommez-le jquery.betterTooltip.js pour le rendre compatible avec jQuery.
normes de plugin.
Dans ce fichier .js, incluez le code suivant:
$ .fn.betterTooltip = function () );
Cela crée une fonction publique qui peut être appelée à partir du tête d'un document ou
un autre fichier .js externe. Pour appeler votre plugin, vous devez appeler la ligne suivante depuis un$ (document) .ready événement de page.
Accentsconagua
$ (document) .ready (function () $ ('. tTip'). betterTooltip ();); La ligne ci-dessus va attacher le plugin à chaque élément avec le nom de classe "tTip". De même, vous
pourrait l'attacher à n'importe quel élément de votre choix.
Pour éviter de devoir modifier le plug-in pour chaque projet, il est important d'exposer une partie des
les variables et les paramètres afin qu'ils puissent être modifiés de l'extérieur du plugin lui-même. Le but ultime serait
pour ne jamais toucher le plugin, ajustez simplement ses paramètres. Pour ce faire, ajoutez ce qui suit à ce premier morceau
de code:
$ .fn.betterTooltip = fonction (options) / * Configure les options de l'info-bulle accessible de l'extérieur * / var defaults = speed: 200, delay: 300; var options = $ .extend (valeurs par défaut, options); );
Cela permet aux paramètres "speed" et "delay" d'être modifiés lorsque le plugin est appelé comme ceci:
$ ('. tTip'). betterTooltip (speed: 600, delay: 600); Celles-ci sont complètement optionnelles. Si non spécifié, le plugin utilisera les valeurs par défaut.
Rappelez-vous que HTML que vous avez tapé pour l'info-bulle? Il va maintenant faire son apparition officielle.
Dans cette séquence de code, la manipulation de contenu "prépend" de jQuery est utilisée pour injecter l'info-bulle
immédiatement après l'ouverture corps étiquette. De cette façon, nous pouvons nous assurer que l'info-bulle
est positionné sur tout.
/ * Crée une fonction qui construit le balisage de l'info-bulle. Ensuite, ajoutez l'info-bulle au corps * / getTip = function () var tTip = ""+""; return tTip; $ (" body "). prepend (getTip ());"+""+""+"
C'est l'un des aspects les plus importants et les plus utiles d'un plugin jQuery. La fonction $ (this) .each
parcourt chaque élément de page associé au plugin lorsqu’il a été évoqué. Dans ce cas c'est
tous les éléments avec la classe "tTip". Quand il parcourt chaque élément, il applique les propriétés et les méthodes
que vous spécifiez.
$ (this) .each (function () var $ this = $ (this); var tip = $ ('. tip'); var tipInner = $ ('. tip .tipMid'); var tTitle = (this. title); this.title = ""; var offset = $ (this) .offset (); var tLeft = offset.left; var tTop = offset.top; var tWidth = $ ceci.width (); var tHeight = $ this.height (); / * Fonctions de survol * * / $ this.hover (fonction () tipInner.html (tTitle); setTip (tTop, tLeft); setTimer ();, function () stopTimer ( tip.hide ();); C'est assez simple. La moitié supérieure consiste en un tas de propriétés pour la hauteur, la largeur, la position x et y et
même la valeur d'attribut title des éléments "tTip". J'utilise la méthode CSS jQuery offset () pour saisir les positions supérieure et gauche. Il y a aussi
fonction de survol assignée à chaque classe "tTip" qui appelle des méthodes au passage de la souris. Ces méthodes seront décrites
plus bas dans le tutoriel.
Une partie importante de la fonction $ (this) .each est cette ligne de code qui supprime l'attribut title:
this.title = "";
Le but de cette info-bulle est d’échanger le générique
info-bulle avec une meilleure version accrocheur. Si vous ne supprimez pas l'attribut title, que le navigateur
utilise pour générer l'info-bulle générique, vous obtiendrez des info-bulles duel. Comme ça:
/ * Retarder l'animation de fondu de l'info-bulle * / setTimer = function () $ this.showTipTimer = setInterval ("showTip ()", defaults.delay); stopTimer = function () clearInterval ($ this.showTipTimer); Ces deux méthodes, setTimer et stopTimer, sont utilisées pour créer un délai à partir du moment où l'utilisateur survole
leur curseur sur l'élément avec la classe "tTip" et quand l'info-bulle apparaît. Ce
est important d'éviter les utilisateurs agaçants. Je suis sûr que nous partageons tous la frustration lorsque nous survolons accidentellement
sur l'une de ces publicités qui sont cachées dans le contenu des sites.
La méthode setTimer crée un objet setInterval qui appelle "showTip ()" après le temps imparti..
Pour que setInterval ne boucle pas à l'infini, la méthode stopTimer est appelée pour arrêter l'objet setInterval..
/ * Positionne l'info-bulle par rapport à la classe associée à l'info-bulle * / setTip = fonction (haut, gauche) var topOffset = tip.height (); var xTip = (left-30) + "px"; var yTip = (top-topOffset-60) + "px"; tip.css ('top': yTip, 'left': xTip); La fonction de survol à l'intérieur de la boucle $ (this) .each créée précédemment appelle la méthode setTip (). Son but est de positionner
l'info-bulle directement au-dessus de l'élément "tTip". Ceci est fait avant l'animation de fondu.
/ * Cette fonction arrête le chronomètre et crée l'animation d'ouverture en fondu * / showTip = function () stopTimer (); tip.animate ("top": "+ = 20px", "opacity": "toggle", default.speed); ); ; Dernier point mais non le moindre, la fonction showTip (). Ceci utilise l'effet d'interface utilisateur animate () de jQuery pour afficher en fondu l'info-bulle
tout en glissant vers le bas.
Une fois que vous avez terminé et satisfait de vos résultats, vous pouvez déplacer votre plugin de la page HTML de base remplie de texte de remplissage vers
le monde réel et le mettre à profit.
Ceci est un exemple très basique de ce qu'un plugin d'infobulle peut faire. La partie amusante maintenant sera de le rendre plus robuste.
Il y a toutes sortes de façons d'étendre ce plugin. Une amélioration nécessaire serait la détection
l'emplacement de l'info-bulle par rapport aux limites de la fenêtre du navigateur et l'affichage de l'info-bulle en conséquence,
il n'est pas coupé.
Merci d'avoir lu ce tutoriel. J'espère que cela vous éclairera sur la manière dont vous pouvez utiliser jQuery pour améliorer la qualité de votre site Web.
interface.
Laissez les commentaires commencent! Je veux entendre ce que tu penses. Cette technique aide-t-elle réellement les utilisateurs à se déplacer plus facilement?,
ou est-ce juste un autre ennui?
