管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jCallout 轻松实现气泡提示功能

　　jCallout的下载地址：https://github.com/anupamsmaurya/jCallout

　　需要添加此引用

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) 可以关闭气泡：

jCallout 轻松实现气泡提示功能

　　另外，该气泡同样可以显示图片，将图片的 html 代码写入 message 参数即可：

　　

复制代码 代码如下:

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

jCallout 轻松实现气泡提示功能

教程首页 更多教程