jQuery關(guān)鍵詞說明插件cluetip使用指南
我們開發(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)文章
JavaScript和JQuery實(shí)用代碼片段(一)
JavaScript和JQuery實(shí)用代碼片段,喜歡學(xué)習(xí)jquery的朋友可以參考下。2010-04-04JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)
下面小編就為大家?guī)硪黄狫Query 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09$(document).ready(function() {})不執(zhí)行初始化腳本
今天發(fā)現(xiàn)一個(gè)頁面始終不執(zhí)行$(document).ready(function() {})初始化腳本,下面是解決方法2014-06-06input file樣式修改以及圖片預(yù)覽刪除功能詳細(xì)概括(推薦)
這篇文章主要介紹了input file樣式修改以及圖片預(yù)覽刪除功能,input file 按鈕改成自己想要的樣式以及.圖片預(yù)覽功能的實(shí)現(xiàn),具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中,測(cè)試人員報(bào)告缺陷說,即時(shí)有表單驗(yàn)證,但是如果快速點(diǎn)擊兩下“提交”按鈕,系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。2010-03-03為你的網(wǎng)站增加亮點(diǎn)的9款jQuery插件推薦
如今,jQuery插件眾多,滿足各種各樣的應(yīng)用需求。 在這篇文章中,我收集了9款很棒的插件,最喜歡的是Sausage內(nèi)容分頁插件,作者想法特別新穎!希望你能從中找到自己需要的插件。2011-05-05JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
這篇文章主要介紹了JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果,需要的朋友可以參考下2015-09-09基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)資料,需要的朋友可以參考下2016-08-08