欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jCallout 輕松實現(xiàn)氣泡提示功能

 更新時間：2013年09月22日 15:59:55   作者：  
在提交表單前、焦點轉(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)如下顯示，并且，點擊 (x) 可以關(guān)閉氣泡：

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

復(fù)制代碼 代碼如下:

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

相關(guān)文章

最新評論