欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery關(guān)鍵詞說明插件cluetip使用指南

 更新時(shí)間:2015年04月21日 10:50:52   投稿:hebedich  
我們?cè)谧鰓eb項(xiàng)目的時(shí)候,經(jīng)常會(huì)使用到提示效果。html自帶的提示效果是label標(biāo)簽的title,但是這個(gè)效果過于簡(jiǎn)單和難看,并且不方便調(diào)整樣式。今天我偶然發(fā)現(xiàn)個(gè)jQuery的插件,可以很方便的做出漂亮的提示效果。

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

1.     cluetip插件功能

 

主要用于為某些關(guān)鍵詞添加提示說明功能,也可以展示廣告。cluetip插件可以讀取另一個(gè)html文件中的內(nèi)容,

<a class="custom-width" href="ajax3.html" rel="ajax3.html">關(guān)鍵詞</a>

會(huì)讀取ajax3.html頁面的內(nèi)容

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

2.cluetip官方地址

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

在官方地址上有插件的詳細(xì)使用說明

最常用的屬性為:

splitTitle: '|' 標(biāo)題和內(nèi)容的分隔符

sticky: true    是否開啟強(qiáng)制關(guān)閉 true 為開啟。必須點(diǎn)擊關(guān)閉,才能關(guān)閉當(dāng)前提示

closeText: '圖片或文字'  關(guān)閉的圖片或文字展示,如<img src="cross.png" alt="" />

closePosition: 'title' 關(guān)閉按鈕的位置

dropShadow: false  是否添加陰影 true為添加,false為不添加

positionBy: 'mouse'  提示窗體是否按鼠標(biāo)位置移動(dòng)。

truncate: 60   截取長(zhǎng)度,說明長(zhǎng)度過長(zhǎng)時(shí),只取前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.定義樣式??梢允褂霉俜降臉邮?,也可以自定義。自定義時(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" alt="" />',
      closePosition: 'title',
      dropShadow: false,
      positionBy: 'mouse'
      //truncate: 60
  });
  
});

4.用到的html

<a href='#' title='提示標(biāo)題|提示內(nèi)容' class='樣式'>關(guān)鍵詞</a>

以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論