jCallout 輕松實現氣泡提示功能
更新時間：2013年09月22日 15:59:55 作者：
在提交表單前、焦點轉移后或者 keyup 時往往需要對輸入的文本就行檢驗，如果輸入內容不符合相關約定則要進行提示或警告，有一個叫 jCallout 的插件可以輕松實現該功能，該插件基于 jQuery 使用，所以使用前需要添加引用 jQuery
jCallout的下載地址：https://github.com/anupamsmaurya/jCallout
需要添加此引用
用戶名一行的 html 代碼是：
復制代碼 代碼如下:
<tr>
<td class="columnName">用戶名：</td>
<td><input id="hTbxUserName" class="needCheck" type="text"/><span class="necessary">*</span></td>
</tr>
然后在 js 中添加如下代碼：
復制代碼 代碼如下:
$('#hTbxUserName').jCallout(
'initWithoutShow',{
message: "必填項！",
position: "right",
backgroundColor: "#f00",
textColor: "#fff",
showEffect: "fade",
showSpeed: 300,
hideEffect: "fade",
hideSpeed: 300,
$closeElement: $('')
});
需要注意的是 jCallout 有兩種初始化的方法：init 和 initWithoutShow，前者初始化后就會立即顯示氣泡，后者不會立即顯示，要在需要時添加代碼顯示：
復制代碼 代碼如下:
var $userNameInput = $("#hTbxUserName");
$userNameInput.blur(function() {
if($userNameInput.val().length==0){
$userNameInput.jCallout('show');
}
});
參數 $closeElement 是設置氣泡的關閉按鈕，看插件源碼會發(fā)現
復制代碼 代碼如下:
$closeElement: $('<span style="float: right; cursor: pointer">(X)</span>'),
如果不設置 $closeElement: $('') 的話，會出現如下顯示，并且，點擊 (x) 可以關閉氣泡：
另外，該氣泡同樣可以顯示圖片，將圖片的 html 代碼寫入 message 參數即可：
復制代碼 代碼如下:
message: "<img src='images/11.png'>必填項！"
相關文章
學習了jquery,發(fā)現其功能真的很令我驚訝，為表格添加背景色用css也可以實現，卻不得不在<tr>標簽里一行一行地添加，但用jquery只需四行代碼，就是這樣精簡的用法，讓我對jquery產生了極大的興趣，也不得不驚嘆新興的技術所帶來的效率！2010-01-01
這篇文章主要介紹了Jquery簡單分頁實現方法,實例分析了jquery分頁的相關實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了jQuery easyui基本布局實現代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
上周發(fā)布了‘jquery開發(fā)的數獨游戲’，下載量很多評論的人很少。近期會將主要的開發(fā)思路整理出來與大家交流，非常希望與大家通過這個例子共同探討和學習。2010-11-11
在Web開發(fā)中,表單提交是一個常見的操作,通過表單提交用戶可以向服務器發(fā)送數據,jQuery是一個流行的JavaScript庫,可以簡化處理JavaScript的操作,包括表單提交,在本篇博客中,我們將介紹如何使用jQuery來實現表單提交操作,需要的朋友可以參考下2024-09-09
jQuery確實是一個挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應用，并在一定程度上改變了我們寫JavaScript代碼的習慣。2010-12-12
這篇文章主要介紹了基于jQuery實現搜索關鍵字自動匹配功能，自動匹配搜索關鍵詞功能廣泛應用到搜索引擎當中，感興趣的小伙伴們可以參考一下2015-10-10
這篇文章主要介紹了jQuery實現列表的增加和刪除功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
基于jQuery實現交互體驗社會化分享代碼附源碼下載。這是一款鼠標點擊分享按鈕向右滑出騰訊微博，新浪微博，QQ空間，豆瓣，微信，二維碼分享等分享平臺，本段代碼比較實用，需要的朋友參考下吧2016-01-01
多個$(document).ready()的執(zhí)行順序實例分析
這篇文章主要介紹了多個$(document).ready()的執(zhí)行順序實例分析,對于加深理解$(document).ready()的加載與執(zhí)行順序有很大幫助,需要的朋友可以參考下2014-07-07