EasyUI 提示框

来源：互联网发布：广联达梦龙软件下载编辑：程序博客网时间：2024/05/21 04:26

当用户移动鼠标指针在某个元素上时，出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。

1、用法

（1）、从标记创建提示框（Tooltip），添加 'easyui-tooltip' class 到元素，不需要任何的 javascript 代码。

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

（2）、使用 javascript 创建提示框（Tooltip）。

<a id="dd" href="javascript:void(0)">Click here</a>$('#dd').tooltip({    position: 'right',    content: '<span style="color:#fff">This is the tooltip message.</span>',    onShow: function(){$(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666'});    }});

2、属性

名称

类型

描述

默认值

position

string

提示框（tooltip）位置。可能的值：'left'、'right'、'top'、'bottom'。

bottom

content

string

提示框（tooltip）内容。

null

trackMouse

boolean

如果设置为 true，提示框（tooltip）会随着鼠标移动。

false

deltaX

number

提示框（tooltip）位置的水平距离。

deltaY

number

提示框（tooltip）位置的垂直距离。

showEvent

string

引发提示框（tooltip）出现的事件。

mouseenter

hideEvent

string

引发提示框（tooltip）消失的事件。

mouseleave

showDelay

number

显示提示框（tooltip）的时间延迟。

200

hideDelay

number

隐藏提示框（tooltip）的时间延迟。

100

3、事件

名称

参数

描述

onShow

当显示提示框（tooltip）时触发。

onHide

当隐藏提示框（tooltip）时触发。

onUpdate

content

当提示框（tooltip）内容更新时触发。

onPosition

left,top

当提示框（tooltip）位置改变时触发。

onDestroy

none

当提示框（tooltip）销毁时触发。

4、方法

名称

参数

描述

options

none

返回选项（options）属性（property）。

tip

none

返回提示（tip）对象。

arrow

none

返回箭头（arrow）对象。

show

显示提示框（tooltip）。

hide

隐藏提示框（tooltip）。

update

content

更新提示框（tooltip）内容。

reposition

none

重置提示框（tooltip）位置。

destroy

none

销毁提示框（tooltip）。

5、实例

（1）、基础工具提示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basic Tooltip - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Basic Tooltip</h2><p>Hover the links to display tooltip message.</p><div style="margin:20px 0;"></div><p>The tooltip can use each elements title attribute.<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.</p></body></html>

（2）、工具栏提示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Tooltip as Toolbar - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Tooltip as Toolbar</h2><p>This sample shows how to create a tooltip style toolbar.</p><div style="margin:20px 0;"></div><div style="padding:10px 80px"><p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="hideEvent: 'none',content: function(){return $('#toolbar');},onShow: function(){var t = $(this);t.tooltip('tip').focus().unbind().bind('blur',function(){t.tooltip('hide');});}">Hover me</a> to display toolbar.</p></div><div style="display:none"><div id="toolbar"><a href="#" class="easyui-linkbutton easyui-tooltip" title="Add" data-options="iconCls:'icon-add',plain:true"></a><a href="#" class="easyui-linkbutton easyui-tooltip" title="Cut" data-options="iconCls:'icon-cut',plain:true"></a><a href="#" class="easyui-linkbutton easyui-tooltip" title="Remove" data-options="iconCls:'icon-remove',plain:true"></a><a href="#" class="easyui-linkbutton easyui-tooltip" title="Undo" data-options="iconCls:'icon-undo',plain:true"></a><a href="#" class="easyui-linkbutton easyui-tooltip" title="Redo" data-options="iconCls:'icon-redo',plain:true"></a></div></div></body></html>

（3）、自定义提示样式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Custom Tooltip Style - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Custom Tooltip Style</h2><p>This sample shows how to change the tooltip style.</p><div style="margin:s0px 0;"></div><div style="padding:10px 200px"><div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div></div><div style="padding:10px 200px"><div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div></div><script>$(function(){$('#pp1').tooltip({position: 'right',content: '<span style="color:#fff">This is the tooltip message.</span>',onShow: function(){$(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666'});}});$('#pp2').tooltip({position: 'bottom',content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>',onShow: function(){$(this).tooltip('tip').css({backgroundColor: '#fff000',borderColor: '#ff0000',boxShadow: '1px 1px 3px #292929'});},onPosition: function(){$(this).tooltip('tip').css('left', $(this).offset().left);$(this).tooltip('arrow').css('left', 20);}});});</script></body></html>

（4）、对话框内容

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Tooltip Dialog - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Tooltip Dialog</h2><p>This sample shows how to create a tooltip dialog.</p><div style="margin:20px 0;"></div><div style="padding:10px 100px"><p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog.</div><script>$(function(){$('#dd').tooltip({content: $('<div></div>'),showEvent: 'click',onUpdate: function(content){content.panel({width: 200,border: false,title: 'Login',href: '_dialog.html'});},onShow: function(){var t = $(this);t.tooltip('tip').unbind().bind('mouseenter', function(){t.tooltip('show');}).bind('mouseleave', function(){t.tooltip('hide');});}});});</script></body></html>

（5）、ajax工具提示

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax Tooltip - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Ajax Tooltip</h2><p>The tooltip content can be loaded via AJAX.</p><div style="margin:20px 0;"></div><a href="#" class="easyui-tooltip" data-options="content: $('<div></div>'),onShow: function(){$(this).tooltip('arrow').css('left', 20);$(this).tooltip('tip').css('left', $(this).offset().left);},onUpdate: function(cc){cc.panel({width: 500,height: 'auto',border: false,href: '_content.html'});}">Hove me</a> to display tooltip content via AJAX.</body></html>

0 0