jQuery關鍵字說明外掛程式cluetip使用指南_jquery

我們開發的網站，總是有它一定的用途。如企業站用來宣傳企業或展示產品，技術站用來分享自己的想法和經驗。既然網站有了它的用途，那麼就擁有了它本身的關鍵字(關鍵字說明網站的主要內容)。例如企業站的關鍵字大部分是企業名稱或產品名稱，技術站的關鍵字大部分是技術術語。不論是企業宣傳產品或分享想法經驗，我們都想給某些術語加上說明或連結（跳到術語頁面），這時我們就可以使用cluetip外掛。

1.     cluetip外掛功能

 

主要用於為某些關鍵字添加提示說明功能，也可以顯示廣告。 cluetip外掛可以讀取另一個html檔案中的內容，

如

關鍵字

會讀取ajax3.html頁面的內容

官方地址demo中有使用說明。

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>

以上所述就是本文的全部內容了，希望大家能夠喜歡。