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

发布于 2019-08-06 19:10:39 字数 3964 浏览 1778 评论 0

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

使用方法

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>');
});