abTips首页 - 文本描述提示插件

插件介绍：: abTips基于jquery运行的文本描述提示插件。; 提示框支持上下左右等多种定位，可自定义信息属性标签默认为ab-text，也可直接选择获取title属性标签默认信息。支持跟随鼠标位置提示以及固定位置提示。插件自动检测是否处于浏览器窗口边缘，确保提示框总是停留在可见区域。; 兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。

下载此演示例子：: 百度网盘 ( zip资源包 )|阿里云盘 ( exe资源包 )
GitHub|Gitee

一. 基础使用设置

注意：在网页的头部引用abTips.css插件所需的方向箭头样式文件，在网页的头部或底部引用jQuery.js和abTips.js两个js文件。一定要确保在abTips.js之前放置jquery.js前后顺序不能乱。

1. <!doctype html>

2. <html>

3. <head>

4. <meta charset="utf-8">

5. <title>domo-abTips演示例子</title>

6. <link type="text/css" rel="stylesheet" href="abTips.css" />

7. <script type="text/javascript" src="js/jquery.min.js"></script>

8. <script type="text/javascript" src="js/jquery.abTips-v1.2.min.js"></script>

9. </head>

10. <body>

二. 编写html代码

注意：创建一个div的父层，如此例子abTips-main。在其内部创建一个包裹层.abTips-box和滚动条必须的内容层如.content，添加css样式进行控制外观。

1. <div class="abTips-main">

2. <div class="abTips-box">

3. <div class="content">

4. <p><a href="javascript:;" ab-text="需显示的文本信息">abTips</a></p>

5. </div>

6. </div>

7. </div>

三. 编写例子css样式

注意：提示框容器层如无指定文字大小，会被你编写的全局文字大小样式所影响。自定义ab-text或title信息需页面提前存在至少一个，jquery.abTips.min.js 才能正常的工作。

1. <style type="text/css">

2. * { margin:0; padding:0; }

3. body { background:#0c91e8; font-size:12px; color:#183b52; }

4. ul,li { list-style:none; } /* 默认需引用abTips.css插件所需的方向箭头样式文件，样式可修改。 */

5. p { word-wrap:break-word; }

6. img { border:0; vertical-align:middle; }

7. a { color:#eef7fe; text-decoration:none; }

8. a:hover { color:#fff; text-decoration:none; }

9. </style>

四. 调用参数的设置

注意：在要使用效果的div父层外，放置调用代码即可实现效果。建议把每个页面abTips的调用，统一放在页尾</body></html>标签关闭之前，或放置在一个统一的js文件里面引用，方便维护与管理。

1. <script type="text/javascript">

2. $(document).ready(function () {

3. new abTips({

4. "contentEl": "a[title]", /* (HTML)绑定描述文本元素 */

5. "attr": "title", /* 描述文本属性(默认=ab-text) */

6. "textClass": "abTips-layer-text", /* 描述文本自定义class样式名 */

7. "direction": "bottom", /* 默认位置方向(默认=bottom): left=左, right=右, top=上, bottom=下 */

8. "align": "left", /* 布局: (direction=top|bottom): left|right|center, (direction=left|right): top|bottom|center */

9. "offsetX": -20, /* X 轴偏移(默认=0) */

10. "offsetY": 20, /* Y 轴偏移(默认=0) */

11. "speed": 80, /* 过度效果(默认=250) */

12. "maxWidth": 200, /* 最大宽度 */

13. "isMouse": true, /* 跟随鼠标(默认=false) */

14. "debug": true, /* 开发调试(默认=false) */

15. "textArrowClass": {

16. "tl": "abTips-arrow-top-left", /* 顶部-居左 */

17. "tc": "abTips-arrow-top-center", /* 顶部-居中 */

18. "tr": "abTips-arrow-top-right", /* 顶部-居右 */

19. "lt": "abTips-arrow-left-up", /* 左侧-顶部 */

20. "lc": "abTips-arrow-left-center", /* 左侧-居中 */

21. "lb": "abTips-arrow-left-down", /* 左侧-底部 */

22. "rt": "abTips-arrow-right-up", /* 右侧-顶部 */

23. "rc": "abTips-arrow-right-center", /* 右侧-居中 */

24. "rb": "abTips-arrow-right-down", /* 右侧-底部 */

25. "bl": "abTips-arrow-bottom-left", /* 底部-居左 */

26. "bc": "abTips-arrow-bottom-center", /* 底部-居中 */

27. "br": "abTips-arrow-bottom-right" /* 底部-居右 */

29. }});

30. });

31. </script>

32. </body>

33. </html>

返回首页|综合下载

abTips基于jquery运行的文本描述提示插件

Top