jQuery-Keyword-Beschreibungs-Plug-in-Hinweistipp-Nutzungsanleitung_jquery

Die von uns entwickelten Websites haben immer einen bestimmten Zweck. Beispielsweise dient die Unternehmenswebsite der Werbung für das Unternehmen oder der Präsentation von Produkten und die technische Website dem Austausch eigener Ideen und Erfahrungen. Da die Website nun ihren Zweck erfüllt, verfügt sie über eigene Schlüsselwörter (Schlüsselwörter beschreiben den Hauptinhalt der Website). Beispielsweise handelt es sich bei den meisten Schlüsselwörtern auf der Unternehmenswebsite um Firmennamen oder Produktnamen und bei den meisten Schlüsselwörtern auf der technischen Website um Fachbegriffe. Ob es sich um ein Unternehmen handelt, das Produkte bewirbt oder Ideen und Erfahrungen austauscht, wir alle möchten Erklärungen oder Links zu bestimmten Begriffen hinzufügen (zur Begriffsseite springen), dann können wir das Cluetip-Plug-in verwenden.

1. Cluetip-Plug-in-Funktion

Wird hauptsächlich zum Hinzufügen von Hinweisen und Beschreibungen für bestimmte Schlüsselwörter verwendet und kann auch Anzeigen anzeigen. Das Cluetip-Plugin kann den Inhalt in einer anderen HTML-Datei lesen,

wie

Schlüsselwörter

Wird den Inhalt der Seite ajax3.html lesen

Eine Gebrauchsanweisung finden Sie in der offiziellen Adressdemo.

2.Hinweis zur offiziellen Adresse

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

Detaillierte Anweisungen zur Verwendung des Plug-Ins finden Sie unter der offiziellen Adresse

Die am häufigsten verwendeten Attribute sind:

splitTitle: '|' Trennzeichen zwischen Titel und Inhalt

sticky: true Ob das erzwungene Schließen aktiviert werden soll, true ist aktiviert. Sie müssen auf Schließen klicken, um die aktuelle Eingabeaufforderung zu schließen

closeText: 'Bild oder Text' Geschlossene Bild- oder Textanzeige, z. B.

closePosition: 'title' Schaltflächenposition schließen

dropShadow: false Ob ein Schatten hinzugefügt werden soll, true bedeutet, dass er hinzugefügt wird, false bedeutet, ihn nicht hinzuzufügen

positionBy: 'mouse' fragt, ob sich das Formular entsprechend der Mausposition bewegt.

Abschneiden: 60 kürzt die Länge. Wenn die Länge zu lang ist, werden nur die ersten 60 Zeichen verwendet

3.So verwenden Sie Cluetip

1. Referenzdateien

<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. Definieren Sie den Stil. Sie können den offiziellen Stil verwenden oder ihn anpassen. Sie müssen die Datei jquery.cluetip.css beim Anpassen ändern. Wie in diesem Beispiel gezeigt

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

3. Verwendeter js-Code

$(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. Verwendetes HTML

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.