Vous pouvez créer de très jolies choses en utilisant jQuery. Le dernier kit de mise à jour met à jour de nombreux bogues et donne même des conseils sur la prise en charge d’un nouveau jQuery Mobile. Avec les scripts frontend, vous pouvez créer pratiquement n'importe quel type d'application Web. Mais plus spécifiquement, nous étudierons la possibilité de construire une petite fenêtre de boîte modale.
J'ai conçu cette fonctionnalité pour qu'elle ressemble à une solution de messagerie privée. C'est parfait pour implémenter sur une page de profil utilisateur ou la page de l'auteur dans un blog. Nous utiliserons certaines techniques CSS3 pratiques en codant la structure de la page en HTML5. Vous n'avez pas besoin d'être un maître artiste jQuery pour comprendre ce tutoriel, mais il ne fait pas de mal de rafraîchir les bases. Consultez mon exemple de démonstration en direct et téléchargez le code source du projet ci-dessous.
Essaye le
Voir la démo en direct - Source de téléchargement
La structure HTML
Avant de plonger dans jQuery, examinons d’abord un peu le code HTML. Si vous souhaitez examiner l'ensemble de la mise en page du document, je vous suggère de le télécharger à partir du code source. Mais je voudrais me concentrer sur le code HTML de la boîte modale pour plus d'explications.
J'ai divisé le modèle en utilisant HTML5 .containmsg qui contient notre boîte modale et un bouton pour afficher / masquer le contenu. Le conteneur modal utilise la classe .mainCompose. C’est également ce que nous ciblons dans jQuery - regardons le code HTML pour cela ci-dessous.
** Entrez du texte!
Envoyer le message
Dans notre élément de forme, il n'y a pas de surprises. Une petite étiquette et un champ de message. Également un champ to: avec un lien vers la page de l'utilisateur. Dans cette démonstration, j'ai lié à ma page d'auteur DesignShack. Ce n'est pas obligatoire, cependant. Vous pouvez même supprimer le lien tout en conservant les styles CSS. La liste des utilisateurs est codée en tant qu'élément UL afin que vous puissiez prendre en charge la messagerie à plus d'une personne.
Maintenant, avant de plonger dans jQuery, il y a une autre technique que je voulais couvrir. Si vous cliquez sur l’icône de composition, vous remarquerez que notre boîte modale comporte un petit triangle situé tout en haut. Vous pouvez utiliser des images pour cette technique, mais il existe une alternative plus simple utilisant strictement CSS.
Triangles avec des info-bulles CSS
Il y a une petite div qui apparaît directement au-dessus du formulaire de message. Cela contient deux classes étiquetées calloutUp et calloutUp2. Le premier se comporte comme une continuation de notre frontière extérieure (le bronzage plus foncé) tandis que le second se connecte au centre de notre zone de forme. En utilisant les deux, nous pouvons créer des triangles correspondants dans un connecteur de type info-bulle.
Cela fonctionne grâce à un paramètre CSS qui fait que toutes les frontières se rejoignent au centre sous forme de triangle. Nous pouvons donc définir ces deux divs pour qu’ils n’aient pas de hauteur ni de largeur, mais des bordures massives. Si nous ne colorions qu’une des bordures et que le reste est transparent, nous créons l’effet de triangle que nous voyons ici. Consultez les classes CSS pour les deux légendes.
Je suis également en train de régler les détails pour les frontières environnantes, car cela permet au bloc div de conserver son aspect carré. Sinon, notre forme deviendrait rectangulaire et nos triangles sortiraient alors avec des bords déchiquetés. le z-index la propriété est également importante pour que notre extrémité intérieure reste au-dessus de la pointe extérieure. Les autres styles sont utilisés pour simuler nos polices dans l'exemple de démonstration, certainement rien d'extraordinaire.
Développer des interactions avec jQuery
Maintenant, nous pouvons fouiller dans les bonnes choses! Si vous avez déjà utilisé jQuery, vous serez probablement familiarisé avec le démarrage d'un nouveau document. Commencez par inclure la dernière version de jQuery dans votre page. Si vous ne souhaitez pas télécharger et héberger le fichier vous-même, Google propose toutes les versions de jQuery Live aux développeurs. La dernière version que j'ai utilisée est library 1.6.2 mini.
Une fois que cela est inclus, vous devez ouvrir une autre balise de script pour JavaScript. J'ai décidé d'écrire mon code dans le bloc d'en-tête de la même page HTML. Mais vous pouvez également déplacer ceci vers le corps, le pied de page ou même dans un fichier externe. Les premiers extraits de code que j'ai ajoutés ci-dessous.
Nous appelons notre $ (document) .ready () fonction pour suspendre toute action jusqu'à ce que le chargement de la page soit terminé. La première tâche consiste à masquer immédiatement 3 éléments de page. Ceux-ci sont .mainCompose pour cacher notre boîte modale, .chargeur cacher le chargement gif ajax, et #errortxt qui ne s'affiche que si l'utilisateur n'a rien saisi et tente d'envoyer le formulaire. Chacun de ces éléments ne sera affiché que sous certaines conditions. Il est donc préférable de les masquer immédiatement.
Enfin, notre première action de script consiste à rechercher un gestionnaire d’événements click. le .composer La classe est en fait liée à notre image composée même s’il n’ya pas de lien d’ancre sur lequel cliquer. jQuery peut gérer les événements de clic et appeler slideToggle () de toute façon. Le dernier élément de code à examiner est la manière dont nous pouvons extraire des données de la saisie de l'utilisateur.
Traitement du formulaire modal
Nous recherchons uniquement un dernier gestionnaire d'événement final. Ceci est lié à l'événement clic de notre .sendbtn, qui est en fait lié à un lien d’ancrage dans notre boîte modale.Juste à côté se trouve notre image ajax .gif animée qui était cachée juste après le chargement de la page.
La fonction d'exécution juste après que notre bouton est cliqué a maintenant un paramètre. fonction (e) passe simplement l'instance de notre événement click directement dans la fonction en tant que variable. Nous utilisons ce sélecteur d’événements pour appeler la méthode preventDefault () afin que notre lien ne se comporte pas comme un lien. Nous cachons aussi immédiatement le .sendbtn et le remplaçons par notre image .loader.
Ensuite, nous passons à une clause standard if / else vérifiant la #mymsg valeur textarea. Si cela ne contient pas de texte, nous savons que l'utilisateur n'a rien saisi. Dans ce cas, nous affichons notre message d'erreur et masquons à nouveau l'image de chargement tout en affichant à nouveau notre bouton. Sinon, nous entrons dans le autre{ } clause qui suppose que nous pouvons envoyer le message!
Je n'ai pas écrit de code Ajax / PHP car il est hors de portée de ce tutoriel. Mais vous devriez vérifier la fonction jQuery ajax () qui peut décupler le développement du backend. J'ai mis de côté une variable formQueryString qui peut être utilisé pour transmettre les données de formulaire à un appel Ajax. Au lieu de cela, je vais juste finir l'esthétique dans une petite fonction finalSend ();
Ce que nous voulons faire maintenant, c’est fermer notre boîte modale et afficher une petite icône de vérification pour indiquer à l’utilisateur que tout va bien et que tout va bien. J'ai utilisé .delay () pour garder la boîte modale ouverte pendant 1 seconde avant d'appeler notre dernière méthode slideToggle (). Cela a été ajouté uniquement pour les apparences dans ce didacticiel afin que vous puissiez voir à quoi il ressemble dans l'attente du chargement du serveur. Si vous voulez laisser vos utilisateurs attendre une seconde supplémentaire, vous pouvez laisser cela - mais cela ne sert à rien d’autre!
Après l'animation de la diapositive, j'ai ajouté une fonction de rappel. Il ne comprend que 2 lignes de code de base. Nous ciblons d’abord l’icône de composition et changeons sa classe de .composer à .envoyé, puis cachez-le. Enfin nous ciblons #composebtn qui est le conteneur div de notre icône et ajouter une nouvelle icône de coche. Maintenant, nos utilisateurs savent que le message a été envoyé et que nous n’utilisons pratiquement pas d’écran!
Voir la démo en direct - Source de téléchargement
Conclusion
Ce tutoriel aurait dû vous mettre un peu plus à l'aise pour construire une boîte modale évolutive dans jQuery. Nous avons créé d'excellents styles CSS et utilisé des traitements de base pour améliorer l'interaction de l'utilisateur. Vous pouvez certainement ajouter beaucoup de choses, mais notre exemple pose la structure du sol et ouvre la voie à de plus grandes possibilités.
Si vous cherchez toujours à consulter ma démo ou à télécharger le code source, vous pouvez le faire ci-dessous. La lecture de code peut être source de confusion après de longues périodes de temps. Je recommande donc de télécharger directement la source pour avoir une meilleure idée du fonctionnement de cette petite application. De même, si vous avez des questions ou des idées, vous pouvez les proposer dans la zone de discussion.