GRANDHINT: Un outil pour créer des conseils de site Web interactifs
GRAYHINT est un outil pour créer des invites interactives sur un site Web qui aide les utilisateurs à comprendre les fonctionnalités des applications Web. Il est gratuit à utiliser, prend en charge les zones en surbrillance de différentes formes, permet des retards proches et fournit une prise en charge des navigateurs croisés.
Fonctions de base:
comment utiliser:
bower install enjoyhint
) ou téléchargez à partir du référentiel GitHub. var enjoyhint_instance = new EnjoyHint({});
enjoyhint_script_steps
, chaque étape définit le contenu de l'invite, les événements de déclenchement, les styles, etc. enjoyhint_instance.set(enjoyhint_script_steps);
pour définir la configuration de l'invite. enjoyhint_instance.run();
Exécutez le script d'invite. Exemple de définition de l'invite:
Une simple invite, surveille un bouton et afficher les instructions:
var enjoyhint_script_steps = [{ 'click .btn': '点击此按钮切换搜索结果', 'skipButton': {className: "mySkip", text: "明白了"} //自定义跳过按钮 }];
Créez une séquence rapide:
Par l'événement next
, plusieurs invites sont affichées en séquence:
var enjoyhint_script_steps = [ {'next .navbar-brand': '这是网站标题'}, {'key #mySearch': '在此输入搜索关键词,按Enter键搜索', 'keyCode': 13}, {'click .btn': '点击这里切换搜索类型'}, {'next .about': '关于我们', 'shape': 'circle', 'radius': 70}, {'next .contact': '欢迎反馈', 'showSkip': false} // 最后一个提示,隐藏跳过按钮 ];
Fonction de rappel:
GRAYHINT fournit des fonctions de rappel onStart
, onEnd
et onBeforeStart
, qui effectuent des opérations personnalisées avant, après et avant que chaque invite ne commence respectivement.
Résumé:
GRAYHINT est un outil puissant et facile à utiliser qui aide les développeurs à créer des guides utilisateur interactifs et à améliorer l'expérience utilisateur. Ses options de personnalisation flexibles et sa compatibilité entre les navigateurs le rendent idéal pour les projets de développement Web.
(Veuillez noter: Puisque je n'ai pas la possibilité d'accéder aux liens d'image externes, l'image ne peut pas être affichée. Veuillez remplacer le lien de l'image par le lien disponible réel.)
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!