中名软件园:打造绿色软件,免费软件下载基地!

软件分类|下载排行|最近更新

当前位置:首页软件教程其他综合相关 → 文本描述提示插件abTips

文本描述提示插件abTips

时间:2023-05-13 10:05:16人气:作者:网友整理我要评论

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

文本描述提示插件abTips


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

提示框支持上下左右等多种定位,可自定义信息属性标签默认为ab-text,也可直接选择获取title属性标签默认信息。

支持跟随鼠标位置提示以及固定位置提示。插件自动检测是否处于浏览器窗口边缘,确保提示框总是停留在可见区域。

兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。

使用说明以及注意事项如下:

1、首先引用jQuery v1.8.3+版本 ( 更低版本能兼容到jQuery1.43推荐使用jQuery1.8.3 )

jQuery目录地址  js/jquery-1.8.3.min.js


2、引用abTips Js文件

插件JS目录地址如下

js/abTips-v1.2.js   开发版

js/abTips-v1.2.min.js   压缩迷你版(推荐使用)


3、引用abTips Css文件

插件Css目录地址如下

css/abTips.css   (此文件为插件提示框箭头等样式文件)


4、调用相关参数说明

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

<script type="text/javascript">
  $(document).ready(function () {
    new abTips({
      "contentEl": "a[title]", /* (HTML)绑定描述文本元素 */
      "attr": "title", /* 描述文本属性(默认=ab-text) */
      "textClass": "abTips-layer-text", /* 描述文本自定义class样式名 */
      "direction": "bottom", /* 默认位置方向(默认=bottom): left=左, right=右, top=上, bottom=下 */
      "align": "left", /* 布局: (direction=top|bottom): left|right|center, (direction=left|right): top|bottom|center */
      "offsetX": -20, /* X 轴偏移(默认=0) */
      "offsetY": 20, /* Y 轴偏移(默认=0) */
      "speed": 80, /* 过度效果(默认=250) */
      "maxWidth": 200, /* 最大宽度 */
      "isMouse": true, /* 跟随鼠标(默认=false) */
      "debug": true, /* 开发调试(默认=false) */
      "textArrowClass": {
        "tl": "abTips-arrow-top-left", /* 顶部-居左 */
        "tc": "abTips-arrow-top-center", /* 顶部-居中 */
        "tr": "abTips-arrow-top-right", /* 顶部-居右 */
        "lt": "abTips-arrow-left-up", /* 左侧-顶部 */
        "lc": "abTips-arrow-left-center", /* 左侧-居中 */
        "lb": "abTips-arrow-left-down", /* 左侧-底部 */
        "rt": "abTips-arrow-right-up", /* 右侧-顶部 */
       "rc": "abTips-arrow-right-center", /* 右侧-居中 */
        "rb": "abTips-arrow-right-down", /* 右侧-底部 */
        "bl": "abTips-arrow-bottom-left", /* 底部-居左 */
        "bc": "abTips-arrow-bottom-center", /* 底部-居中 */
        "br": "abTips-arrow-bottom-right" /* 底部-居右 */
    }});
  });
</script>


相关文章

  • 新版塔罗占卜网站源码风水起名系统源码/附带搭建视频及文本教程

    2023新版塔罗占卜网站源码风水起名系统源码,附带搭建视频及文本教程。附带文本教学及视频教程安装方法以linux为例:1、建议在服务器上面安装宝塔面板,以便操作,高逼格技术员可以忽略这步操作。2、把安装包文件解压到根目录,同时建立数据库,把..
  • ERMEB云盘发卡小程序系统源码

    云盘发卡系统成为了许多人和企业必备的工具之一。它能够帮助我们轻松管理和共享文件,并为用户提供便捷的发卡服务。而ERMEB云盘发卡系统源码则是一款功能强大的发卡小程序,不仅具备微信小程序端,还有PC端支持。该系统采用了nuiapp作为微信小程..

推荐文章

关于中名 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright © 2023 WWW.FEELCN.NET 中名软件园 版权所有

声明: 本站非腾讯QQ官方网站 所有软件和文章来自互联网 如有异议 请与本站联系 本站为非赢利性网站 不接受任何赞助和广告