jQuery キーワード説明プラグインのヒントの使用法 guide_jquery

私たちが開発するウェブサイトには常に特定の目的があります。たとえば、コーポレート Web サイトは会社の宣伝や製品の展示に使用され、技術 Web サイトは自分のアイデアや経験を共有するために使用されます。 Web サイトにはその目的があり、独自のキーワードが存在します (キーワードは Web サイトの主なコンテンツを説明します)。たとえば、企業 Web サイトのキーワードのほとんどは会社名または製品名であり、技術 Web サイトのキーワードのほとんどは専門用語です。製品を宣伝する企業であっても、アイデアや経験を共有する企業であっても、特定の用語への説明やリンクを追加したい場合は (用語のページにジャンプします)、Crewtip プラグインを使用できます。

1.cluetipプラグイン機能

主に特定のキーワードのヒントと説明を追加するために使用され、広告を表示することもできます。クルーチップ プラグインは、別の HTML ファイル

として

キーワード

ajax3.html ページのコンテンツを読み取ります

公式アドレスのデモには使用方法が記載されています。

2.cluetip公式アドレス

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

プラグインの使用方法については、公式アドレスに詳細な手順が記載されています

最も一般的に使用される属性は次のとおりです:

splitTitle: タイトルとコンテンツの間の区切り文字

sticky: true 強制終了を有効にするかどうか、true が有効になります。現在のプロンプトを閉じるには、「閉じる」をクリックする必要があります

closeText: '画像またはテキスト' 閉じた画像またはテキスト表示 (例:

closePosition: 'title' 閉じるボタンの位置

dropShadow: false 影を追加するかどうか。true は追加することを意味し、false は追加しないことを意味します

positionBy: 'mouse' は、マウスの位置に従ってフォームが移動するかどうかを確認するプロンプトを表示します。

truncate: 60 長さを切り詰めます。長すぎる場合は、最初の 60 文字のみが取得されます。

3.cluetipの使い方

1. 参照ファイル

<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. スタイルを定義します。公式スタイルを使用することも、カスタマイズすることもできます。カスタマイズする場合は、jquery.cluetip.css ファイルを変更する必要があります。この例に示すように

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

3. 使用される js コード

$(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 を使用します

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

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。