Share
Nous avons tous vu la brillante fonctionnalité de Mashable, qui permet de partager des informations et des articles intéressants sur des sites de réseaux sociaux. la fonctionnalité est guidée par les images accompagnant les articles; vous cliquez et maintenez sur une image et pouvez ensuite la faire glisser dans une barre d'outils pour la partager. C’est génial et intuitif, et dans cet article, je vais vous montrer comment reproduire ce problème avec jQuery et jQuery UI.
La capture d'écran suivante montre ce que nous aurons à la fin du tutoriel:
La dernière version de jQuery est fournie avec l'interface utilisateur jQuery. Dans cet exemple, nous n'avons besoin que des composants principaux, déplaçables et stockables. Assurez-vous donc que seuls ceux-ci sont sélectionnés dans le générateur de téléchargement. Une fois l'archive de l'interface utilisateur jQuery téléchargée, décompressez le dossier js de l'archive (vous n'avez pas besoin du bundle de développement ni de la structure CSS dans cet exemple) dans un dossier de travail..
Créons maintenant une page de base, avec du texte et une image, pour mettre en valeur le comportement. créez la nouvelle page suivante dans votre éditeur de code:
Faites glisser pour partager exemple Lorem ipsum dolor…
Lorem ipsum dolor…
Enregistrez-le sous le nom dragToShare.html dans le dossier contenant le dossier js. Ici, nous avons ajouté notre texte de disposition / exemple et une image, tous deux dans un conteneur. Nous établissons un lien vers les fichiers sources de l'interface utilisateur jQuery et jQuery situés au bas de la page.
et une feuille de style personnalisée dans le . Nous n’avons pas besoin de beaucoup de styles à ce stade car il n’ya pas beaucoup de choses à styler sur la page, mais ajoutons-le ensuite avec quelques styles de base pour les éléments de page; Dans un nouveau fichier de votre éditeur de code, ajoutez ce qui suit:#content width: 440px; #content img float: right; marge gauche: 20px;
Enregistrez ce fichier minuscule sous dragToShare.css dans le même dossier que notre page HTML. Ne vous inquiétez pas, nous ajouterons plus de styles à la feuille de style très prochainement. Notre exemple de page devrait ressembler à ceci à ce stade:
Nous devons rendre l’image glissable, ce que nous pouvons faire avec jQuery UI, ajoutez ce qui suit
C'est tout ce que nous devons faire! Nous mettons simplement en cache le sélecteur pour le ou les éléments que nous aimerions rendre déplaçables, et appelons la méthode draggable () sur la collection d'éléments résultante. Maintenant, en cliquant et en maintenant le bouton de la souris enfoncé, l’image de notre exemple peut être déplacée sur la page. L’image sera déplaçable dès que le document sera chargé, le code étant encapsulé dans le raccourci $ (function () )..
En plus de mettre en cache le sélecteur qui renvoie nos images, nous mettons également en cache un sélecteur qui stocke le titre de la page. IE renvoie une chaîne vide lorsque jQuery est utilisé pour récupérer le titre de la page. Nous revenons donc à document.title dans ce cas..
Nous avons encore beaucoup à faire avant d’avoir terminé; Ce que nous devons faire en premier lieu, c'est d'informer le visiteur que le fait de faire glisser l'image fait quelque chose. Premièrement, nous pouvons utiliser un peu de CSS pour définir le pointeur de la souris "Déplacer" lorsque nous survolons l'image. ajoutez la ligne suivante à la fin de dragToShare.css:
.ui-draggable curseur: déplacer;
Nous ciblons la classe .ui-draggable qui est ajoutée par jQuery UI avec ce style afin que l'image n'hérite du curseur de déplacement que si l'image est déplaçable, ce qui ne se produira pas si JavaScript est désactivé ou indisponible. L'utilisation du nom de la classe à la place de la pseudo-classe: hover est également préférable pour la compatibilité entre navigateurs..
Pour bien faire comprendre que faire glisser l'image a un effet, nous pouvons également ajouter une info-bulle pour indiquer explicitement au visiteur ce qu'il doit faire; après la méthode draggable (), ajoutez le nouveau code suivant:
Accentsconagua
var createTip = function (e) // crée une info-bulle si elle n'existe pas ($ ("# tip"). length === 0)? $ ("") .html ("Faites glisser cette image pour partager la page<\/span><\/span>") .attr (" id "," tip "). css (left: e.pageX + 30, en haut: e.pageY - 16). appendTo (" body "). fadeIn (2000): null; ; images.bind ("mouseenter", createTip); images.mousemove (function (e) // move tooltip $ ("# tip"). css (left: e.pageX + 30, en haut: e.pageY - 16);); images.mouseleave (function () // remove tooltip $ ("# astuce"). Remove ();); Nous avons essentiellement ajouté trois nouveaux gestionnaires d’événements à notre code; Le premier gestionnaire d'événements est la fonction createTip, définie comme une variable et transmise à la méthode bind () de jQuery avec la chaîne mouseenter spécifiant l'événement. Les deux fonctions suivantes sont anonymes et sont transmises en ligne aux méthodes d'assistance mousemove () et mouseleave () de jQuery.
Dans la fonction createTip, nous vérifions tout d'abord si l'info-bulle existe déjà en vérifiant si son sélecteur a une longueur de 0. Si c'est le cas (sa longueur est de 0), nous savons qu'elle n'existe pas et nous pouvons ensuite la créer. Nous définissons le innerHTML de l'info-bulle de manière à ce qu'il comporte une étendue contenant le message au visiteur et une deuxième étendue vide que nous utiliserons pour une petite décoration lorsque nous ajouterons le code CSS supplémentaire dans un instant..
Nous attribuons à l'info-bulle un identifiant afin de pouvoir la sélectionner efficacement par la suite et définir ses propriétés CSS gauche et supérieure à l'aide des propriétés pageX et pageY de l'objet événement (e) transmis automatiquement à notre fonction. Nous ajoutons ensuite l'info-bulle au corps de la page et la fondons lentement. Pour éviter les erreurs HTML, nous devons éviter les barres obliques dans le code HTML brut ajouté à l'info-bulle..
La fonction déplacer la souris est utilisée pour créer la piste d'info-bulle avec le pointeur. Ainsi, lorsque le pointeur se déplace, l'info-bulle se déplace également. Nous utilisons à nouveau la méthode css ainsi que les propriétés pageX et pageY. Enfin, la fonction Mouseleave supprime simplement l’info-bulle de la page..
Styliser l'info-bulle
Nous pouvons maintenant ajouter des CSS pour notre infobulle; dans l’intérêt de l’amélioration progressive, nous utiliserons le style sexy CSS3 rgba pour créer des info-bulles semi-transparentes dans des navigateurs performants; Au bas de dragToShare.css, ajoutez les nouveaux sélecteurs et règles suivants:
#tip position: absolute; affichage: aucun; hauteur: 25px; remplissage: 9px 9px 0px; couleur: #fff; famille de polices: Verdana, Arial, Helvetica, sans serif; taille de police: 11px; poids de police: gras; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; arrière-plan: # 000; arrière-plan: rgba (0,0,0, 0,5); #tip .arrow width: 0; hauteur: 0; hauteur de ligne: 0; border-right: 8px solid # 000; bordure droite: rgba solide 8px (0,0,0, 0,5); border-top: 8px solid transparent; fond de la bordure: transparent 8px; position: absolue; à gauche: -8px; en haut: 9px;
C'est tout ce dont nous avons besoin. La plupart des styles sont assez basiques, mais nous utilisons les styles border-radius pour donner à la bulle d'aide des angles arrondis dans les navigateurs gecko et webkit, et comme je l'ai déjà mentionné, nous utilisons rgba pour rendre la bulle d'aide semi-transparente. C’est un très bon effet. Bien qu’il ne soit pris en charge que par quelques navigateurs classiques, il est bien plus efficace que d’utiliser un fichier PNG alpha transparent..
La plage vide que nous avons ajoutée à l'info-bulle est conçue de manière à ressembler à une flèche dans une bulle de dialogue pointant vers le pointeur de la souris. Ceci est créé en utilisant la technique des formes CSS et comme ce n'est pas CSS3, il est supporté par la plupart des navigateurs. Il est même pris en charge dans IE6, bien que la transparence des frontières que nous lui attribuons ne soit pas prise en charge. Nous pourrions résoudre ce problème assez facilement si nous le voulions vraiment, mais pour les besoins de ce tutoriel, je ne vais pas dévier de ce sujet..
Notez que nous utilisons également rgba pour la couleur de bordure de notre étendue afin qu’elle se confonde avec le reste de l’info-bulle. Maintenant, IE (toutes les versions) ne supportera pas ces styles rgba, mais comme nous avons fourni des couleurs normales avant les déclarations rgba, l’info-bulle apparaîtra uniquement en noir dans IE. Voici comment notre infobulle apparaîtra à son meilleur, belle n'est-ce pas??
Ajout des cibles de largage
Ok, nos visiteurs savent maintenant qu’ils peuvent faire glisser l’image quelque part pour partager la page, mais où la font-ils glisser? Et où peuvent-ils le partager? Nous devons maintenant réagir à l'image traînée et afficher les cibles de dépôt, qui seront constituées d'une série de liens vers des sites de réseaux sociaux. Nous avons plusieurs choses à faire ici; nous devons d'abord ajouter une superposition à la page et créer les cibles de dépôt.
Nous pourrions créer les cibles de largage entièrement à partir de rien, à la volée, avec jQuery comme nous l'avons fait avec l'info-bulle, mais dans la nature, cela entraînerait probablement un retard inacceptable pour certains visiteurs. Nous pouvons minimiser cela en ajoutant le balisage sous-jacent pour les cibles de dépôt à la page et en le montrant simplement lorsque nous en avons besoin. Directement avant lee
