溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery信息提示框中如何進(jìn)行clueTip的應(yīng)用

發(fā)布時(shí)間：2021-11-15 22:51:54 來源：億速云 閱讀：123 作者：柒染 欄目：開發(fā)技術(shù)

本篇文章為大家展示了jquery信息提示框中如何進(jìn)行clueTip的應(yīng)用，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

clueTip是一款非常不錯(cuò)的，基于jQuery的信息提示插件。當(dāng)鼠標(biāo)滑向鏈接或者頁面中的元素，會(huì)出現(xiàn)一個(gè)漂亮的提示框。提示框里的內(nèi)容可以是本頁面上的，也可以是通過ajax加載的的頁面，clueTip還提供了許多可配置的參數(shù)，用戶可以根據(jù)實(shí)際情況定制不同的效果和樣式。

clueTip有以下特性：

使用非常簡單；

可定制，提供大量參數(shù)可配置；

提示窗口根據(jù)頁面大小可以自動(dòng)調(diào)整位置；

可以ajax加載頁面內(nèi)容

跨瀏覽器兼容，兼容IE6+,Firefox,Safria,Opera等主流瀏覽器。

XHTML

clueTip有兩種展示提示窗口的方法，分為通過“rel”屬性ajax加載遠(yuǎn)程頁面內(nèi)容和通過“title”屬性（默認(rèn)設(shè)置）加載頁面內(nèi)容。

1、通過title屬性加載內(nèi)容

<a class="title" href="#" title="提示窗口標(biāo)題|內(nèi)容.|內(nèi)容分行。。。">鼠標(biāo)滑向看看效果</a>

2、通過rel屬性加載遠(yuǎn)程頁面內(nèi)容

<a class="basic" href="ajax.php" rel="ajax.php" title="加載AJAX頁面">Ajax加載PHP頁面</a>

Javascript和樣式

在<head>之間加入jquery和clueTip插件以及樣式clueTip.css。

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cluetip.js"></script> <script type="text/javascript"> $(function(){ $('a.title').cluetip({splitTitle: '|'}); $('a.basic').cluetip(); }); </script> <link rel="stylesheet" type="text/css" href="cluetip.css" />

clueTip插件常用參數(shù)一覽表

參數(shù)            描述            默認(rèn)值        width            提示窗口的寬度            275        height            提示窗口的高度            'auto'        positionBy            設(shè)置提示窗口的位置：'auto', 'mouse','bottomTop', 'fixed'            'auto'        topOffset            窗口相對（上）位移量            15        leftOffset            窗口相對（左）位移量            15        local            是否使用同一頁面的內(nèi)容，可以是頁面中的一個(gè)DIV，這時(shí)應(yīng)該設(shè)置rel="#ID"            false        attribute            用來承接窗口內(nèi)容的屬性            rel        titleAttribute            窗口標(biāo)題屬性            title        splitTitle            設(shè)置內(nèi)容分隔符            ''        showTitle            是否顯示標(biāo)題            true        cluetipClass            窗口的樣式，樣式的名稱格式為.cluetip-cluetipClass            default        waitImage            是否顯示內(nèi)容載入前的等待loading圖片。            true        sticky            是否當(dāng)手工單擊關(guān)閉時(shí)才關(guān)閉窗口            false        closePosition            設(shè)置關(guān)閉按鈕的位置：'top' or 'bottom' or 'title'            'top        closeText            關(guān)閉按鈕顯示的內(nèi)容，可以是文本，也可以是html圖片            'Close'

更多參數(shù)設(shè)置請到官方網(wǎng)站查看：http://plugins.learningjquery.com/cluetip/

cluptip在用戶點(diǎn)擊了鏈接后，頁面不會(huì)轉(zhuǎn)向href地址，而是一點(diǎn)反應(yīng)都沒有，那怎么解決點(diǎn)了鏈接后直接轉(zhuǎn)向該鏈接的頁面呢？解決辦法有：綁定a標(biāo)簽的click事件,代碼如下：

$('a.basic).bind('click',function(){ window.location.href=$(this).attr('href');; });

上述內(nèi)容就是jquery信息提示框中如何進(jìn)行clueTip的應(yīng)用，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手