内容发布更新时间 : 2024/6/21 13:48:10星期一 下面是文章的全部内容请认真阅读。
http://xueyuan.lanqiao.org
jQuery-EasyUI基础教程之Tooltip提示框
课程目标
?
掌握Tooltip的使用方法
Tooltip Tooltip简介
当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。效果如图：
开发Tooltip程序
1. Hover me 只需要简单的给a标签添加一个指定的class样式即有提示框的效果。效果如下图：
Tooltip常用属性 属性名 属性值类型 描述 默认值 position string 消息框位置。可用值有：bottom http://xueyuan.lanqiao.org
\content string 消息框内容。 null trackMouse boolean 为true时，允许提示框跟着鼠标移动。 false deltaX number 水平方向提示框的位置。 0 deltaY number 垂直方向提示框的位置。 0 showEvent string 当激发什么事件的时候显示提示框。 mouseenter hideEvent string 当激发什么事件的时候隐藏提示框。 mouseleave showDelay number 延时多少秒显示提示框。 200 hideDelay number 延时多少秒隐藏提示框。 100 参考jQuery EasyUI的API。 代码如下： 1. 2. 3. 4. $('#dd').tooltip({ position: 'right', trackMouse:true, content: '
效果如下图：
Tooltip常用方法
方法名 方法参数 描述 options none 返回控件属性对象。 tip none 返回tip元素对象。 arrow none 返回箭头元素对象。 show e 显示提示框。 hide e 隐藏提示框。 update content 更新提示框内容。 reposition none 重置提示框位置。 destroy none 销毁提示框。 Tooltip常用事件
http://xueyuan.lanqiao.org
事件名 事件参数 描述 onShow e 在显示提示框的时候触发。 onHide e 在隐藏提示框的时候触发。 onUpdate content 在提示框内容更新的时候触发。 onPosition left,top 在提示框位置改变的时候触发。 onDestroy none 在提示框被销毁的时候触发。 代码如下： 1. 2. 3. 4. $('#dd').tooltip({ position: 'right', trackMouse:true, content: '
Tooltip的基本用法。 http://xueyuan.lanqiao.org
本文来源：蓝桥软件学院
以上便是