jQuery關鍵詞說明插件cluetip使用指南

我們在做web項目的時候，經常會使用到提示效果。html自帶的提示效果是label標簽的title，但是這個效果過于簡單和難看，并且不方便調整樣式。今天我偶然發現個jQuery的插件，可以很方便的做出漂亮的提示效果。

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

1. cluetip插件功能

主要用于為某些關鍵詞添加提示說明功能，也可以展示廣告。cluetip插件可以讀取另一個html文件中的內容，

如

關鍵詞

會讀取ajax3.html頁面的內容

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

2.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=">

<script src="jquery.cluetip.js"></script>

2.定義樣式?？梢允褂霉俜降臉邮剑部梢宰远x。自定義時需修改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>

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

更多信息請查看IT技術專欄