DIV CSS 佈局教程網

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 是設置氣泡的關閉按鈕，看插件源碼會發現

. 代碼如下:
$closeElement: $('<span style="float: right; cursor: pointer">(X)</span>'),

如果不設置 $closeElement: $('') 的話，會出現如下顯示，並且，點擊 (x) 可以關閉氣泡：

另外，該氣泡同樣可以顯示圖片，將圖片的 html 代碼寫入 message 參數即可：

. 代碼如下:
message: "<img src='images/11.png'>必填項！"