README

smallipop

Small Improvements 信息弹出

这个 jQuery 插件被创建出来，因为所有测试过的工具提示都没有满足我们的要求。

我们想要

纯 CSS 设计。为旧浏览器提供回退，无图片。
CSS 动画 支持。
自定义主题 以满足不同用例。
弹出触发器 可以放置在任意位置。弹出将在 body 根部显示，因此位置不会受到布局的影响。
自动定位 无论弹出出现在哪里。弹出会尝试保持在屏幕的可视区域内，即使是在滚动或边缘。
文档中只有一个弹出 元素。一些插件为每个触发器创建一个隐藏的弹出。
每个触发器都有自定义选项。如果您愿意，可以在一个页面上有 20 个不同的弹出，每个弹出都有 20 个不同的主题。
小巧。仅 ~ 3.5KB 最小化和 ~ 2KB 压缩。

我们已经开始使用这个插件做很多事情，所以请关注 github 上的新版本。

查看文档页面以获取实时演示和示例。

你喜欢这个项目吗？请买我一杯啤酒

安装

先决条件

jQuery - 1.5.2 或更高版本
Modernizr - 此库测试浏览器对功能的支持，并为 body 标签添加类。我们使用此库在主题中进行 CSS 回退。

这两个库也包含在 lib 文件夹中。

如果您不想使用 Modernizr 库，您可以从 css/jquery-smallipop.css 中的 .cssgradients、.borderradius、.rgba 和 .boxshadow 类中删除。

所需文件

将 lib/jquery-smallipop.js 复制到您的 JavaScript 文件夹。将 css/jquery-smallipop.css 复制到您的 CSS 文件夹。

使用方法

如果您喜欢演示而不是无聊的文档，请查看 index.html 文件并与之交互。

此插件可以通过不同的方式使用 jQuery 调用。

标准调用，使用默认主题和设置

$('.myElement').smallipop();

弹出内容及标记

如果 myElement 是一个 <a> 标签，则使用元素的 title 属性作为弹出文本

<a class="myElement" href="#" title="Some hint text">
    Sample link
</a>

您也可以在 JavaScript 中为所有选定的元素提供文本

$('.myElement').smallipop({}, 'This is my special hint');

如果 myElement 包含具有 smallipop-hint 类的元素，则当显示时将它的内容复制到弹出中。这可以是您喜欢的任何标记内容。当使用浮动元素作为内容时请小心，它们需要在之后进行 clearfix，否则 jQuery 无法获取弹出正确的尺寸。

<div class="myElement">
    Sample link
    <span class="smallipop-hint">
       <h6>My bubble title</h6>
       <p>Some text for the bubble</p>
    </span>
</div>

插件首先检查是否在 JavaScript 调用中提供了文本。如果没有，则如果触发器是一个链接，将使用 title 属性。如果没有，则检查元素是否包含另一个具有 smallipop-hint 类的元素，并使用它的 HTML 内容。

使用不同的主题

$('.myElement').smallipop({
    theme: 'white'
});

在显示弹出时隐藏弹出触发器

$('.myElement').smallipop({
    hideTrigger: true
});

在javascript中提供提示

$('.myElement').smallipop({}, 'This is my special hint');

更改所有后续创建的弹出窗口的默认主题

$.smallipop.defaults.theme = 'black'

您也可以以这种方式更改其他所有选项的默认值。

选项

popupOffset: 弹出窗口的水平偏移量。默认值是 31。
popupYOffset: 弹出窗口的垂直偏移量。默认值是 0。
popupDistance: 弹出窗口出现和消失时的垂直距离。默认值是 20。
hideTrigger: 在显示弹出窗口时隐藏触发器。默认值是 false。
theme: css文件中包含 black、orange、blue、white 和 default。默认值是 default。
infoClass: 包含弹出窗口标记内容的元素的类。默认值是 smallipop-hint。
popupDelay: 在弹出窗口出现之前，您需要在元素上悬停多少毫秒。默认值是 100。
triggerAnimationSpeed: 当启用 hideTrigger 时，触发器淡入和淡出速度有多快。默认值是 150。
popupAnimationSpeed: 弹出窗口到达最终动画位置和透明度所需的时间（毫秒）。默认值是 200。
invertAnimation: 当鼠标悬停在元素上时，弹出窗口会向上移动，当淡出时进一步向上移动。如果将此设置为 true，则在淡出时弹出窗口将向下移动。默认值是 false。
horizontal: 弹出窗口将定位在触发器的左侧或右侧。默认值是 false。

编辑

如果您想修改或扩展 smallipop，请阅读此章节。

此插件是用 coffeescript 编写的，并且与 sass 一起使用的css。源代码位于 src 和 scss 文件夹中。

因此，您可以在项目中使用编译的 .js 和 .css 文件，或者使用 coffeescript 和 sass 文件。

我提供了一个组合的监视器脚本 watcher.py，当您编辑文件时，它会启动两个监视器守护程序。这需要安装python、coffeescript 和 sass。您可以在项目主页上找到非常好的安装说明。

为主题生成的css相当长。删除您不需要的任何主题。

用于弹出箭头的css有点棘手。如果您想更改它，您需要了解css边框是如何渲染的，或者您可以使用图像。

反馈

请发送邮件给我sebastian@helzle.net或发推文 @sebobo。

此插件是我尝试创建自定义提示、coffeescript 和 scss 的第一次尝试，因此欢迎提出改进意见。

贡献

克隆仓库，进行更改，运行 grunt qunit 并创建一个拉取请求。

components / jquery-smallipop

维护者

详细信息