jBox

介绍

jBox是由 Stephan Wagner 开发的，使用 jQuery 驱动的，可创建比操作系统原生的更美观的 ToolTip，多配置项，可定制的 JavaScript 库。

使用效果可前往作者的网站体验。

安装 / 在项目中引入

可以通过 NPM 安装。

npm install --save jbox

在项目中导入：

import jBox from 'docs/jbox';
import 'jbox/dist/jBox.all.css';

首先引入 jQuery。

<script src="https://static.qi1.website/js/jquery.js"></script>

然后引入 jBox 的 CSS 和 JS。

<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.css" rel="stylesheet">

也可以引入本站的地址：

<script src="https://static.qi1.website/css/jbox.css"></script>
<link href="https://static.qi1.website/js/jbox.js" rel="stylesheet">

使用 - 创建 jBox 实例

由于 jBox 是指向某个元素的 toolTip，因此要为 jBox 指定附着在什么元素上。

new jBox('Tooltip', {
  attach: '.tooltip'
});

若存在 class 为 tooltip 的元素，则 jBox 会附着在此元素上。

<span class="tooltip" title="My tooltip">悬浮</span>
<span class="tooltip" title="Another tooltip">悬浮</span>

在作者的演示网站中，jBox 同样可以阻塞的窗口。

new jBox('Modal', {
  width: 300,
  height: 100,
  attach: '#myModal',
  title: 'My Modal Window',
  content: '<i>Hello there!</i>'
});

<div id="myModal">Click me to open a modal window!</div>

更多的窗口的知识这里不演示，可以去 作者的演示站 查看。

使用 - 为元素创建 jBox

这里给出一个 ImQi1 主站以前使用的方法，具体就是每个元素预先写好 title 属性和它的值，然后为每个 title 元素添加 toolTip。

new jBox('Tooltip', {
  attach: '[title]'
});

<span title="Span1">Span1</span>
<span title="Span2">Span2</span>
<span title="Span3">Span3</span>