jCallout 輕松實現(xiàn)氣泡提示功能
更新時間：2013年09月22日 15:59:55 作者：
在提交表單前、焦點(diǎn)轉(zhuǎn)移后或者 keyup 時往往需要對輸入的文本就行檢驗，如果輸入內(nèi)容不符合相關(guān)約定則要進(jìn)行提示或警告，有一個叫 jCallout 的插件可以輕松實現(xiàn)該功能，該插件基于 jQuery 使用，所以使用前需要添加引用 jQuery
jCallout的下載地址：https://github.com/anupamsmaurya/jCallout
需要添加此引用
用戶名一行的 html 代碼是：
復(fù)制代碼 代碼如下:
<tr>
<td class="columnName">用戶名：</td>
<td><input id="hTbxUserName" class="needCheck" type="text"/><span class="necessary">*</span></td>
</tr>
然后在 js 中添加如下代碼：
復(fù)制代碼 代碼如下:
$('#hTbxUserName').jCallout(
'initWithoutShow',{
message: "必填項！",
position: "right",
backgroundColor: "#f00",
textColor: "#fff",
showEffect: "fade",
showSpeed: 300,
hideEffect: "fade",
hideSpeed: 300,
$closeElement: $('')
});
需要注意的是 jCallout 有兩種初始化的方法：init 和 initWithoutShow，前者初始化后就會立即顯示氣泡，后者不會立即顯示，要在需要時添加代碼顯示：
復(fù)制代碼 代碼如下:
var $userNameInput = $("#hTbxUserName");
$userNameInput.blur(function() {
if($userNameInput.val().length==0){
$userNameInput.jCallout('show');
}
});
參數(shù) $closeElement 是設(shè)置氣泡的關(guān)閉按鈕，看插件源碼會發(fā)現(xiàn)
復(fù)制代碼 代碼如下:
$closeElement: $('<span style="float: right; cursor: pointer">(X)</span>'),
如果不設(shè)置 $closeElement: $('') 的話，會出現(xiàn)如下顯示，并且，點(diǎn)擊 (x) 可以關(guān)閉氣泡：
另外，該氣泡同樣可以顯示圖片，將圖片的 html 代碼寫入 message 參數(shù)即可：
復(fù)制代碼 代碼如下:
message: "<img src='images/11.png'>必填項！"
相關(guān)文章
這篇文章主要介紹了關(guān)于input全選反選惡心的異常情況的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jquery實現(xiàn)二級導(dǎo)航下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
easyui 中的datagrid跨頁勾選問題的實現(xiàn)方法
很多朋友都遇到這樣的需求，easyui的datagrid分頁顯示數(shù)據(jù)，如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中，easyui會保存在其他頁選中的數(shù)據(jù)嗎？小編結(jié)合資料自己整理了一篇文章，需要的的朋友參考下吧2017-01-01
jquery實現(xiàn)清新實用的網(wǎng)頁菜單效果
這篇文章主要介紹了jquery實現(xiàn)清新實用的網(wǎng)頁菜單效果,涉及jquery通過鼠標(biāo)事件控制頁面元素的動態(tài)隱藏與顯示實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery判斷數(shù)組是否包含了指定的元素的方法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jquery更改元素屬性attr()方法,結(jié)合實例形式簡單分析了jquery更改元素屬性attr()方法基本功能、語法及相關(guān)使用技巧,需要的朋友可以參考下2020-05-05
seajs加載jquery時提示$ is not a function該怎么解決
這篇文章主要介紹了seajs加載jquery時提示$ is not a function該怎么解決的相關(guān)資料,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery的context屬性用法,實例分析了context屬性返回節(jié)點(diǎn)內(nèi)容的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
使用jQuery實現(xiàn)WordPress中的Ctrl+Enter和@評論回復(fù)
相信大家對QQ中的Ctrl+Enter快捷回復(fù)和微博上的@指名回復(fù)功能都不陌生,在WordPress的評論欄方面我們同樣可以添加這樣的功能,一起來看使用jQuery實現(xiàn)WordPress中的Ctrl+Enter和@評論回復(fù)的方法:2016-05-05
json數(shù)據(jù)是一種經(jīng)型的實時數(shù)據(jù)交互的數(shù)據(jù)存儲方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來給大家介紹jquery處理json數(shù)據(jù)方法。2014-06-06