jQuery EasyUI 教程-Tooltip(提示框)
2017-06-12 15:47
232 查看
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body> <a href="##" id="box">toolTip</a> </body> </html>
$(function () { $('#box').tooltip({ content : 'fghjkl',//提示的内容 position:'top' //消息框的位置left top bottom trackMouse:true //允许提示框跟着鼠标移动 deltaX:0 //水平方向提示框位置 deldaY:0 //竖直方向提示框位置 showEvent:'click'//当激活事件的时候显示提示框 hideEvent:'dbclick'//当激活事件的时候隐藏提示框 showDelay:500,//延迟多长时间显示 hideDelay:500,//延迟多长事件隐藏 onShow: function(e){}//显示的时候触发 onHide:function(e){}//隐藏的时候触发 onUpdate:function(e){}//内容更新的时候触发 onPosition:function(left,top){}//改变位置的时候触发 onDestroy:function(none){}//被销毁的时候触发 }); //返回属性对象 console.log($('#box').tooltip('options')); //显示提示框 $('#box').tooltip('show'); //隐藏提示框 $('#box').tooltip('hide'); //更新content 内容 $('#box').tooltip('update', '更新提示内容'); //返回tip 元素对象 onShow : function () { console.log($('#box').tooltip('tip')); }, //返回箭头元素对象 onShow : function () { console.log($('#box').tooltip('arrow')); }, //销毁提示框 $('#box').tooltip('destroy'); //重置工具栏位置 onShow : function (e) { $('.tooltip-right').css('left', 500); }, onHide : function (e) { $('#box').tooltip('reposition'); }, $.fn.tooltip.defaults.position = 'top';
使用$.fn.tooltip.defaults重写默认值对象。(译者注:1.3.3版中新增的plugin)
当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。
使用案例:
创建提示框
通过标签和Javascript两种方法来创建提示框。
1、通过标签创建提示框,给元素添加一个”easyui-tooltip”的类名,无需任何Javascript代码。
<a href=”#” title=”This is the tooltip message.” class=”easyui-tooltip”>Hover me</a>
2. 通过Javascript创建提示框。
<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′ }); } });
属性:
[b]事件:[/b]
[b]
[/b]
方法:
相关文章推荐
- JQuery easyui (4)Tooltip (提示组件) 组件
- jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
- 在Joomla!中使用弹出提示(Tooltip)教程 【转】
- Highcharts基础教程(六):数据提示框(Tooltip)
- jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
- 【bootstrap教程】Bootstrap 工具提示(Tooltip)插件
- MyGUI_Orge官网教程_6.启用工具提示tooltip
- 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件
- 增强Eclipse ,MyEclipse 的代码提示功能(图文教程)
- 增强Eclipse ,MyEclipse 的代码提示功能(图文教程)V1.1(强悍推荐)
- 如何消除windowsdao版提示方法 教程
- struts ajax应用一 ToolTip提示
- C# GridView中鼠标指向行ToolTip提示相关信息
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十 AutoCompleteExtender(自动提示)控件的使用
- jQuery教程(十五)java script 工具提示
- CSS布局大全:40多个教程,提示,例子和最佳实践
- C# WinForm 给某动态控件设置 IsBalloon = true的ToolTip 即 气泡状提示
- Flex中设置Tooltip和错误提示的字体
- [翻译]使用ASP.NET AJAX让GridView的数据行显示提示框(ToolTip)
- [翻译]使用ASP.NET AJAX让GridView的数据行显示提示框(ToolTip)