cluetip關鍵詞連結外掛用法簡單介紹

antzone發表於2017-04-05

很多網站都有這樣的功能，那就是可以對特定的關鍵詞新增連結功能，點選這個關鍵詞可以進入相關的詞條。比如百度百科和維基百科都有這樣的功能，對於展示相關的產品資訊或者廣告有著良好的效果。

使用cluetip外掛可以實現類似的功能，下面介紹一下它的使用方式。

一.cluetip外掛功能:

功能圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/05/121752b9qdr9jnij9zz9qp.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

如<a class="custom-width" href="ajax3.html" rel="ajax3.html">關鍵詞</a>會讀取ajax3.html頁面的內容

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

二.cluetip官方地址:

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

在官方地址上有外掛的詳細使用說明。

最常用的屬性:

splitTitle: '|' 標題和內容的分隔符。

sticky: true    是否開啟強制關閉 true 為開啟。必須點選關閉，才能關閉當前提示。

closeText: '圖片或文字'  關閉的圖片或文字展示，如<img src="cross.png" alt="" />。

closePosition: 'title' 關閉按鈕的位置。

dropShadow: false  是否新增陰影 true為新增，false為不新增。

positionBy: 'mouse'  提示窗體是否按滑鼠位置移動。

truncate: 60   擷取長度，說明長度過長時，只取前60字。

三.cluetip使用方法:

（1）.引用檔案:

[HTML] 純文字檢視 複製程式碼
<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檔案。

如本例所示:

[CSS] 純文字檢視 複製程式碼
body{
  font-size:12px;
  font-family:微軟雅黑;
}
p{
  width:500px;
}
.split-body a{
  color:blue;
}

（3）.使用的js程式碼:

[JavaScript] 純文字檢視 複製程式碼
$(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:

[HTML] 純文字檢視 複製程式碼
<a href='#' title='提示標題|提示內容' class='樣式'>關鍵詞</a>

相關文章