abTips基于jquery运行的文本描述提示插件。 提示框支持上下左右等多种定位,可自定义信息属性标签默认为abtext,也可直接选择获取title属性标签默认信息。支持跟随鼠标位置提示以及固定位置提示。插件自动检测是否处于浏览器窗口边缘,确保提示框总是停留在可见区域。 兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。
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文件里面引用,方便维护与管理。
<scripttype="text/javascript">$(document).ready(function(){newabTips({"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>
产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;
日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉;
本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;
部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入;
如若转载,请注明出处:https://www.chanpinyuan.cn/42816.html;