jQueryEasyUI基础教程之Tooltip提示框.docx

jQuery-EasyUI基础教程之Tooltip提示框课程目标掌握Tooltip的使用方法TooltipTooltip简介当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。效果如图：开发Tooltip程序ahref=#title=This is the tooltip message.class=easyui-tooltipHover me/a只需要简单的给a标签添加一个指定的class样式即有提示框的效果。效果如下图：Tooltip常用属性属性名属性值类型描述默认值positionstring消息框位置。可用值有：left,right,top,bottombottomcontentstring消息框内容。nulltrackMouseboolean为true时，允许提示框跟着鼠标移动。falsedeltaXnumber水平方向提示框的位置。0deltaYnumber垂直方向提示框的位置。0showEventstring当激发什么事件的时候显示提示框。mouseenterhideEventstring当激发什么事件的时候隐藏提示框。mouseleaveshowDelaynumber延时多少秒显示提示框。200hideDelaynumber延时多少秒隐藏提示框。100参考jQueryEasyUI的API。代码如下：$(#dd).tooltip({ position: right, trackMouse:true,content: span style=color:#000This is the tooltip message./span, onShow: function(){ $(this).tooltip(tip).css({ backgroundColor: yellow, borderColor: #666}); }});divid=dd/div效果如下图：Tooltip常用方法方法名方法参数描述optionsnone返回控件属性对象。tipnone返回tip元素对象。arrownone返回箭头元素对象。showe显示提示框。hidee隐藏提示框。updatecontent更新提示框内容。repositionnone重置提示框位置。destroynone销毁提示框。Tooltip常用事件事件名事件参数描述onShowe在显示提示框的时候触发。onHidee在隐藏提示框的时候触发。onUpdatecontent在提示框内容更新的时候触发。onPositionleft,top在提示框位置改变的时候触发。onDestroynone在提示框被销毁的时候触发。代码如下：$(#dd).tooltip({ position: right, trackMouse:true,content: span style=color:#000This is the tooltip message./span, onShow: function(){ $(this).tooltip(tip).css({ backgroundColor: yellow, borderColor: #666}); }});divid=dd/div效果如下图：以上便是Tooltip的基本用法。本文来源：蓝桥软件学院