jquery aime et contrairement au plugin

Avec l’essor des médias sociaux, les likes sont devenus l’un des phénomènes culturels importants dans la culture en ligne d’aujourd’hui et un outil nécessaire pour les personnes en cours d’expression et de communication. Que ce soit sur Weibo, Instagram ou Facebook, les likes sont un moyen simple et efficace d'exprimer vos préférences, vos émotions et vos attitudes. Dans ce contexte, les plug-ins similaires et différents de jQuery sont devenus l'un des outils essentiels pour les développeurs. Ce plugin permet aux développeurs d'implémenter des likes et des disparités sur les pages de manière simple et évolutive.

1. Introduction au plug-in

Ce plug-in, semblable à jQuery, est développé indépendamment par des développeurs nationaux et intègre les principales fonctionnalités suivantes :

1. Vitesse : le code du plug-in est rationalisé et efficace, et ne réduira pas les performances et la vitesse de la page.
2. Facile : le plug-in est simple à utiliser, il suffit d'inclure le fichier de code du plug-in et d'utiliser le sélecteur jQuery pour sélectionner les éléments qui doivent aimer et ne pas aimer les fonctions.
3. Évolutivité : le plug-in prend en charge une configuration personnalisée et peut être étendu et modifié en fonction des besoins réels.
4. Compatibilité : le plug-in prend en charge les navigateurs grand public et prend en charge jQuery pour fonctionner dans plusieurs versions.

2. Utilisation du plug-in

Pour utiliser ce jQuery comme et contrairement au plug-in, il vous suffit de référencer deux fichiers dans votre page HTML, l'un est jQuery (la version doit être 1.9 ou supérieure), l'autre est Fichier de code du plug-in. Vous pouvez télécharger le fichier du plug-in depuis les principales plateformes d'hébergement de code nationales (telles que GitHub ou Gitee) et l'inclure dans votre page comme ceci :

<script src="js/jquery.min.js"></script>
<script src="js/jquery.like-dislike.js"></script>

Après cela, vous devez spécifier les points J'aime et annuler dans la page HTML. Comme les éléments fonctionnels, cela peut être réalisé via les sélecteurs jQuery. Par exemple, vous pouvez sélectionner un bouton pour aimer et ne pas aimer :

<button class="like-button">点赞</button>

Félicitations, vous avez terminé la partie utilisation du plugin, voyons maintenant comment convertir ce simple bouton en j'aime et la possibilité d'annuler les likes.

3. Implémenter les likes et les disparités

Maintenant que nous avons importé le plug-in dans notre page HTML, nous devons utiliser jQuery pour implémenter les fonctions des likes et des discordes. Tout comme pour l'importation de code de plug-in, nous devons également écrire du code jQuery simple pour implémenter cette fonction. Voici le code pour implémenter les likes et annuler les likes :

$(function(){
    $('.like-button').likeDislike({
        reverseMode: true, // 是否启用反转模式
        click: function(like, dislike, event) {
            var value = $(this).attr('value');
            if (value == 'like') {
                var new_value = 'dislike';
            } else {
                var new_value = 'like';
            }
            $(this).attr('value', new_value);
        }
    });
});

Cet extrait de code jQuery est très simple et implémente l'attribut value du. bouton à bascule. Pour obtenir la fonction de commutation consistant à aimer et à annuler les likes. Notez que nous utilisons la classe .like-button lors de la sélection du bouton, que nous avons défini dans le balisage HTML ci-dessus. Si vous sélectionnez une classe ou un ID différent, vous devrez le modifier en conséquence pour vous assurer que votre code jQuery puisse trouver l'élément que vous avez sélectionné.

4. Configuration du plug-in

Ce plug-in similaire à jQuery vous permet également d'effectuer certaines configurations personnalisées. Par exemple, vous pouvez ajuster le texte du bouton, les délais et même définir des catégories CSS pour pouvoir personnaliser l'apparence et le style du bouton. Voici les options disponibles pour la configuration :

1. reverseMode (type bool) : La valeur par défaut est false, si elle est définie sur true, le plugin inversera la valeur (convertira la valeur d'origine en valeur opposée) lorsque l'utilisateur le souhaite ou contrairement à ).
2. disabled (type bool) : La valeur par défaut est false. Si elle est définie sur true, les boutons J'aime et Je ne dis pas seront désactivés.
3. delay (type int) : La valeur par défaut est 500, indiquant le délai de l'animation.
4. click (type de fonction) : la valeur par défaut est nulle, définissez le gestionnaire d'événements de clic.
5. likeClass (type de chaîne) : définissez la catégorie CSS du bouton J'aime.
6. dislikeClass (type de chaîne) : définissez la catégorie CSS du bouton Annuler comme.
7. likeText (type de chaîne) : définissez le texte du bouton J'aime.
8. dislikeText (type de chaîne) : définissez le texte du bouton Annuler J'aime.

Les options ci-dessus sont configurables pour le plug-in et peuvent être modifiées et étendues selon les besoins.

5. Résumé

Cet article présente un plug-in jQuery simple et pratique. Ce plug-in permet aux développeurs d'implémenter la fonction Like et dissemblable de manière rapide et efficace sur des sites Web ou des applications. Ce plugin utilise des sélecteurs jQuery pour rechercher des éléments sur la page et effectuer des actions similaires et différentes sur ces éléments. En plus de cela, ce plugin prend également en charge des options de configuration extensibles qui peuvent être modifiées et étendues en fonction des besoins des développeurs. Ce plug-in simple et pratique améliorera encore l'expérience utilisateur, améliorera l'interactivité et rendra vos sites Web et applications plus attractifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!