PoshyTip 基于 jQuery 轻量级信息提示工具插件 - 文章教程

PoshyTip 基于 jQuery 轻量级信息提示工具插件

发布于 2019-08-06 字数 4784 浏览 1530 评论 0

PoshyTip 是一款非常友好的信息提示工具,它基于 jQuery,当鼠标滑向链接时,会出现一个信息提示条。信息的内容直接可以在 HTML 里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法。

PoshyTip 基于 jQuery 轻量级信息提示工具插件

使用方法

1、首先我们需要引入我们需要的插件文件,别忘了最先引入 jQuery 库

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="src/jquery.poshytip.js"></script>
<link rel="stylesheet" href="src/tip-yellow/tip-yellow.css" type="text/css" />

2、编写一些 HTML 代码,将要提示的文本添加到标签的 Title 属性中

<a id="tip1" title="这里有个工具提示!" href="#">鼠标滑上这里看看</a>

3、通过jQuery选择器初始化插件

$("#tip1").poshytip();

常用示例

使用Poshytip工具提示类很容易。这里有一些例子,都包含在下载包(在“src”文件夹)。

$('#demo-tip-violet').poshytip({
    className: 'tip-violet',
    bgImageFrameSize: 9
});

表单提示

当输入框获得焦点时,在右侧会出现提示工具条,添加表单输入字段的提示很简单。你只需要确保他们在focus/blur(即showOn: 'focus')和位置相对目标元素(即alignTo: 'target')。剧本还更新了这样的提示的位置,如果窗口大小(例如显示下面的一些技巧和调整您的浏览器窗口的一个演示)。

$('#user').poshytip({
    className: 'tip-yellowsimple',
    showOn: 'focus',
    alignTo: 'target',
    alignX: 'right',
    alignY: 'center',
    offsetX: 5
});

服务端加载内容

通过调用服务端ajax.php,获得返回数据,Poshy Tip支持使用函数返回的提示内容,剧本也经过更新回调函数作为参数传递给这个函数。通过使用这个回调函数,你可以很容易地更新异步的提示内容后已显示。剧本也重新计算和更新提示的位置时,它的内容更新。

$('#remote').poshytip({
    alignY: 'bottom',
    content: function (updateCallback) {
        $.get('ajax.php?id=1', function (msg) {
            updateCallback(msg);
        });
        return 'Loading...';
    }
});

鼠标跟随

如果使用followCursor: true选项,这是更好地确保切换动画效果被禁用(即slide: false),它不与代码移动光标提示与冲突。

$('#demo-follow-cursor').poshytip({
    followCursor: true,
    slide: false
});

手动触发提示

如果你愿意,你可以添加一个提示一些元素(S)并将其配置为不自动触发悬停或用showOn: 'none'选项。然后你可以通过手动控制工具提示的方法。

$('#demo-manual-trigger').poshytip({
    content: 'Hey, there! This is a tooltip.',
    showOn: 'none',
    alignTo: 'target',
    alignX: 'inner-left',
    offsetX: 0,
    offsetY: 5
});
$('#button-show').click(function(){
    $('#demo-manual-trigger').poshytip('show');
});
$('#button-show-delayed').click(function(){
    $('#demo-manual-trigger').poshytip('showDelayed', 2000);
});
$('#button-hide').click(function() {
    $('#demo-manual-trigger').poshytip('hide');
});
$('#button-hide-delayed').click(function() {
    $('#demo-manual-trigger').poshytip('hideDelayed', 2000);
});
$('#button-update').click(function() {
    $('#demo-manual-trigger').poshytip('update', 'I am a new content :)');
});
$('#button-disable').click(function() {
    $('#demo-manual-trigger').poshytip('disable');
});
$('#button-enable').click(function() {
    $('#demo-manual-trigger').poshytip('enable');
});
$('#button-destroy').click(function() {
    $('#demo-manual-trigger').poshytip('destroy');
});

动态生成工具提示

你可以设置liveEvents: true选项使用Live事件。请注意,在这种情况下,该方法(除“destroy”)不能可靠地工作。他们只会工作的元素,提示已被初始化(即显示至少一次)。Live事件在jQuery 1.4.2+中得到支持。

$('#demo-live-events > a').poshytip({
    liveEvents: true
});
$('#button-live-events').click(function() {
    $('#demo-live-events').append(', <a title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>');
});

注意事项

这个插件需要 jQuery 1.4+ 及以上版本

兼容IE6+, FF 2+, Opera 9+, Safari 3+, Chrome

在IE6的最小/最大宽度的支持(只有PX值)为工具提示div容器所以你可以使用它们在您的CSS没有担心IE6(如果你还在乎它)

当一个背景图片设置为提示容器div,脚本会忽略背景颜色/填充/边界声明为它设置和使用背景图像的一个可扩展的框架内的div提示(一个解释这是如何工作的,请在Poshy Tip页一看)

在IE6 PNG图像不支持(只有GIF)。如果一个PNG为提示容器背景图像,在IE6的脚本将回退和使用背景颜色/填充/边界的声明而不是。

相关链接

官方地址:http://vadikom.com/demos/poshytip/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论