La nouvelle version de jquery.guide.js est en ligne

Cet article présente principalement la nouvelle version du plug-in jQuery d'invite creuse du guide d'opération en ligne jquery.guide.js (recommandé). Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. S'il vous plaît jquery.guide.js

Lorsque le site Web est en ligne ou révisé, il créera souvent un guide d'opération pour indiquer aux utilisateurs où se trouvent certaines opérations importantes ou quelles choses amusantes sont cachées. quelque part. Des choses, etc., même si je les désactive toujours directement ou les saute rapidement, elles sont toujours très utiles pour certains utilisateurs.

Le meilleur effet interactif de ce type d'invite est d'utiliser un masque creux semi-transparent, de sorte que la mise au point visuelle soit claire en un coup d'œil, semblable à ceci :

J'ai écrit un article L'année dernière, intitulée "Tencent Weiyun Black Mask Boot Mask Better CSS Implementation Method" présente comment utiliser une seule étiquette pour obtenir des effets interactifs similaires. Parmi eux, la technique de base consiste à utiliser l'attribut de bordure CSS, qui est le masque noir translucide environnant. C'est en fait une frontière semi-transparente.

Plus tard, j'ai trouvé une meilleure façon de l'implémenter, qui consiste à utiliser l'attribut outline CSS. L'attribut outline est le contour de l'élément. Il n'augmentera la taille d'aucun élément ni ne détruira la mise en page d'origine. nous n'avons donc besoin que de définir une valeur de largeur de contour très, très grande, et nos éléments positionnés seront toujours naturellement creux. Il n'est pas nécessaire de calculer la taille des zones noires translucides au-dessus, en dessous, à gauche et à droite.

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

Récemment, il y a eu un projet de révision avec des besoins similaires. Sur la base de ce principe, j'ai créé un plug-in jQuery appelé jquery.guide.js, spécialement utilisé pour réaliser un masque noir translucide. effet de guidage rapide.

Adresse de démonstration de l'instance : Cliquez ici pour l'adresse de démonstration

2 Avantages du plug-in jquery.guide.js

Les avantages de jquery.guide.js. Le plug-in est le suivant :

1. Facile à utiliser, importez simplement JS directement sans introduire de ressources CSS ;
2. Prend en charge le défilement du navigateur et le repositionnement du zoom ; telles que les touches haut et bas et les touches gauche et droite pour les étapes précédentes et suivantes, la touche ESC pour quitter, etc.
4. Prend en charge le guidage des éléments présentés de manière asynchrone sur la page
5. , c'est-à-dire un traitement intégré qui ne demandera qu'une seule fois, basé sur localStorage Faites le premier jugement
6 Compatible avec le navigateur IE8

Ensuite, quelques points paresseux :

. 1. La valeur par défaut est d'utiliser l'attribut outline, donc les coins arrondis ne sont pas pris en charge. Si vous souhaitez obtenir un effet similaire à celui ci-dessous :

, vous pouvez utiliser la propriété CSS box-shadow pour simuler un effet de masque semi-transparent, dans la source jquery.guide.js. Dans le code, il est en fait prêt pour tout le monde, comme indiqué ci-dessous :

Comme le disent les commentaires dans le code source, si vous souhaitez prendre en charge les coins arrondis, commentez le contour ci-dessus. Décommentez simplement les lignes box-shadow et border-radius ci-dessous.

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

Parmi eux, box-shadow: 0 0 0 9999px signifie que l'ombre sur place est étendue à 9999px. Du point de vue de l'utilisateur, il s'agit d'un masque noir translucide qui remplit l'écran.

Quant au navigateur IE8 qui ne prend pas en charge CSS3 box-shadow et border-radius, il utilise toujours l'effet de contour à angle droit.

2. Le niveau z-index et la transparence du calque de masque semi-transparent ne sont pas publiés en tant que paramètres, car les invites de guidage pour les novices sont fondamentalement uniques, si vous n'êtes pas satisfait du z-index. niveau ou opacité transparence, il suffit de modifier directement le code source JS.

3. La syntaxe et l'utilisation du plug-in jquery.guide.js

La syntaxe est la suivante :

$.guide(options);

Parmi elles, les options sont un tableau , et les éléments du tableau sont dans un format cohérent. Un objet de paramètres liés aux informations d'invite. La valeur par défaut unifiée de cet objet est :

var defaults = {
  selector: '', 
  content: '', 
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

Lorsqu'elle est utilisée, elle est similaire à ceci :

.

$.guide([{
  selector: '#target'
}]);

Parmi eux :

•sélecteur signifie obligatoire Évider le sélecteur de l'élément cible exposé Si le sélecteur peut correspondre à plusieurs éléments, le premier élément correspondant à la sélection sera utilisé comme cible. element ; si l’élément ne peut pas correspondre, l’intégralité de l’objet paramètre sera ignoré.

•content représente le contenu supplémentaire affiché dans la zone creuse, qui peut être une chaîne HTML ou un objet wrapper jQuery.
•align indique l'alignement du contenu affiché, est-il aligné à gauche, au centre ou à droite ? Les valeurs de mots-clés facultatives incluent : left , center , right , où center est la valeur par défaut.
•offset représente la distance horizontale et verticale du décalage. x est la position du décalage horizontal. La règle de calcul est liée à la valeur du paramètre d'alignement. y représente la distance de décalage vertical. Le contenu de l'invite de contenu n'est pas aligné en haut par défaut. , mais par rapport au creux Alignez l'élément cible exposé 5 pixels au-dessus de son bord inférieur.

Voir c'est croire, pour démarrer la page de démonstration, vous pouvez cliquer ici : le plug-in jQuery jquery.guide.js utilise la démo

La page de démonstration a mis en place un total de 4 éléments d'invite , le JS associé est utilisé comme suit :

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

Cette page de démonstration a été spécialement traitée pour faciliter la démonstration, et l'effet d'invite sera affiché à chaque actualisation. En utilisation réelle, il n’y aura pas de problème de ce type. Il ne sera affiché qu’une seule fois, il n’y a donc pas lieu de s’inquiéter.

4.Conclusion

Ce n'est pas une bonne chose, donc je ne le mettrai pas sur github. Si vous avez la chance de l'utiliser et rencontrez des problèmes, vous êtes invités à nous faire part de vos commentaires sous forme de commentaires.

Recommandations associées :

le plug-in jQuery ImgAreaSelect implémente les fonctions de prévisualisation et de recadrage du téléchargement d'avatar

plug-in jQuery imgAreaSelect exemple d'explication

Explication détaillée du plug-in jquery jquery.viewport.js

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!