jQuery關(guān)鍵詞說(shuō)明插件cluetip使用指南
我們?cè)谧鰓eb項(xiàng)目的時(shí)候，經(jīng)常會(huì)使用到提示效果。html自帶的提示效果是label標(biāo)簽的title，但是這個(gè)效果過(guò)于簡(jiǎn)單和難看，并且不方便調(diào)整樣式。今天我偶然發(fā)現(xiàn)個(gè)jQuery的插件，可以很方便的做出漂亮的提示效果。
我們開(kāi)發(fā)的網(wǎng)站，總有它一定的用途。如企業(yè)站用來(lái)宣傳企業(yè)或展示產(chǎn)品，技術(shù)站用來(lái)分享自己的思路和經(jīng)驗(yàn)。既然網(wǎng)站有了它的用途，那么就擁有了它本身的關(guān)鍵詞(關(guān)鍵詞說(shuō)明網(wǎng)站的主要內(nèi)容)。例如企業(yè)站的關(guān)鍵詞大部分是企業(yè)名稱(chēng)或產(chǎn)品名稱(chēng)，技術(shù)站的關(guān)鍵詞大部分是技術(shù)術(shù)語(yǔ)。不論是企業(yè)宣傳產(chǎn)品或分享思路經(jīng)驗(yàn)，我們都想給某些術(shù)語(yǔ)加上說(shuō)明或鏈接(跳轉(zhuǎn)到術(shù)語(yǔ)頁(yè)面)，這時(shí)我們就可以使用cluetip插件。
1. cluetip插件功能
主要用于為某些關(guān)鍵詞添加提示說(shuō)明功能，也可以展示廣告。cluetip插件可以讀取另一個(gè)html文件中的內(nèi)容，
如
關(guān)鍵詞
會(huì)讀取ajax3.html頁(yè)面的內(nèi)容
官方地址demo中有使用說(shuō)明。
2.cluetip官方地址
在官方地址上有插件的詳細(xì)使用說(shuō)明
最常用的屬性為：
splitTitle: '|' 標(biāo)題和內(nèi)容的分隔符
sticky: true 是否開(kāi)啟強(qiáng)制關(guān)閉 true 為開(kāi)啟。必須點(diǎn)擊關(guān)閉，才能關(guān)閉當(dāng)前提示
closeText: '圖片或文字' 關(guān)閉的圖片或文字展示，如
closePosition: 'title' 關(guān)閉按鈕的位置
dropShadow: false 是否添加陰影 true為添加，false為不添加
positionBy: 'mouse' 提示窗體是否按鼠標(biāo)位置移動(dòng)。
truncate: 60 截取長(zhǎng)度，說(shuō)明長(zhǎng)度過(guò)長(zhǎng)時(shí)，只取前60字
3.cluetip使用方法
1.引用文件
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src=">
<script src="jquery.cluetip.js"></script>
2.定義樣式?？梢允褂霉俜降臉邮?，也可以自定義。自定義時(shí)需修改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" />',
closePosition: 'title',
dropShadow: false,
positionBy: 'mouse'
//truncate: 60
});
});
4.用到的html
<a href='#' title='提示標(biāo)題|提示內(nèi)容' class='樣式'>關(guān)鍵詞</a>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。