<返回上一级
EasyUI中使用Tooltip插件实现提示效果
EasyUI
 EasyUI中的Tooltip插件是个非常实用的控件,我们在开发应用程序时,经常会碰到因页面展示区域受限的原因,需要等鼠标移上去时才显示详细信息的情况,这个时候我们用Tooltip可以达到非常好的效果,下面我们用实例简单介绍下该控件的基本用法。要完成本实例,你首先需要去网站下载必须的js和css文件,这些文件都可以去官网下载,下载地址:http://www.jeasyui.com/download/index.php 这里面有两个版本GPL Edition和Commercial Edition,我们选择 GPL版就好了。
其中以下三个文件是必须的:
1.jquery.easyui.min.js
2.jquery.min.js
3.easyui.css

实例代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Basic Tooltip - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery.min.js"></script>
  10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Tooltip控件基本用法实例</h2>
  14. <p>把鼠标移动到下面的超链接处显示提示信息.</p>
  15. <div style="margin:20px 0;"></div>
  16. <p>我们只要使用元素的title属性设置要显示的内容就可以了.
  17. <a href="#" title="你想显示的内容写在title属性里就可以了,很简单的." class="easyui-tooltip">鼠标移到我上面来</a> 显示提示内容.
  18. </p>
  19. </body>
  20. </html>