Guide d'utilisation du plug-in de description de mot clé jQuery Cluetip_jquery

Les sites Web que nous développons ont toujours un certain but. Par exemple, le site Web d'entreprise est utilisé pour promouvoir l'entreprise ou présenter des produits, et le site Web technique est utilisé pour partager ses propres idées et expériences. Maintenant que le site Web a son objectif, il possède ses propres mots-clés (les mots-clés décrivent le contenu principal du site Web). Par exemple, la plupart des mots-clés sur le site Web de l'entreprise sont des noms de sociétés ou des noms de produits, et la plupart des mots-clés sur le site Web technique sont des termes techniques. Qu'il s'agisse d'une entreprise faisant la promotion de produits ou partageant des idées et des expériences, nous souhaitons tous ajouter des explications ou des liens vers certains termes (accéder à la page des termes), nous pouvons alors utiliser le plug-in Cluetip.

1. Fonction de plug-in d'indice

Principalement utilisé pour ajouter des astuces et des descriptions pour certains mots clés, et peut également afficher des annonces. Le plug-in Cluetip peut lire le contenu d'un autre fichier HTML,

comme

7d4405cf87860889bd069f3b2a3626c8Mots clés5db79b134e9f6b82c0b36e0489ee08ed

Lira le contenu de la page ajax3.html

Il y a des instructions d'utilisation dans la démo d'adresse officielle.

2.adresse officielle cluetip

https://github.com/kswedberg/jquery-cluetip

Il existe des instructions détaillées pour utiliser le plug-in à l'adresse officielle

Les attributs les plus couramment utilisés sont :

splitTitle : '|' séparateur entre le titre et le contenu

sticky : true Que ce soit pour activer la fermeture forcée, true est activé. Vous devez cliquer sur Fermer pour fermer l'invite actuelle

closeText : 'Image ou texte' Affichage d'une image ou d'un texte fermé, tel que 6b0562bf56d25452777ccbb994453b3b

closePosition : 'titre' Position du bouton de fermeture

dropShadow : false S'il faut ajouter une ombre, true signifie l'ajouter, false signifie ne pas l'ajouter

positionBy : 'mouse' demande si le formulaire se déplace en fonction de la position de la souris.

truncate : 60 tronque la longueur Si la longueur est trop longue, seuls les 60 premiers caractères seront pris

3.Comment utiliser l'indice

1. Fichiers de référence

<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.cluetip.js"></script>

2. Définir le style. Vous pouvez utiliser le style officiel ou le personnaliser. Vous devez modifier le fichier jquery.cluetip.css lors de la personnalisation. Comme le montre cet exemple

body{
  font-size:12px;
  font-family:微软雅黑;
}
p{
  width:500px;
}
.split-body a{
  color:blue;
}

3.code js utilisé

$(function(){
  $('a.javascript').cluetip({splitTitle: '|',width: '200px', showTitle: false});
  $('a.html').cluetip({
      splitTitle: '|',
      sticky: true,
      closeText: '<img src="cross.png" alt="" />',
      closePosition: 'title',
      dropShadow: false,
      positionBy: 'mouse'
      //truncate: 60
  });
  
});

4. HTML utilisé

<a href='#' title='提示标题|提示内容' class='样式'>关键词</a>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.