jBox功能强大的模态窗口工具提示和消息效果jQuery插件

发布于 2018-10-07 字数2970 浏览 876 评论 0

jBox 是一个强大而灵活的 jQuery 插件,可以帮助实现模态窗口,工具提示,通知和更多的功能。你可以使用 jQuery 选择器轻松地添加工具提示效果到元素上,您可以以同样的方式设置模态窗口。

使用方法

本文章将为你提供一些基本的使用方法,你也可以访问官方网站查看更详细的使用方法。

引入文件

使用之前需要引入相关的文件,Piece of cake: Include jQuery 2.1 or 1.11, jBox.min.js and jBox.css. Ready to rock & roll!

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
<link external-link="true" href="http://code.jboxcdn.com/0.3.2/jBox.css" rel="stylesheet">

你也可以使用 CDN(code.jboxcdn.com)加速的框架文件。

工具提示

你可以使用jQuery选择器添加工具提示元素:

$('.tooltip').jBox('Tooltip');

在用class=“tooltip”的元素将打开工具提示:

<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>

模态窗口

你可以设置为相同的模态窗口提示。但大多数时候你会想要更多的方法,如一个标题或HTML内容:

new jBox('Modal', {
    width: 300,
    height: 200,
    attach: $('#myModal'),
    title: 'My Modal Window',
    content: '<i>Hello there!</i>'
});
<div id="myModal">Click me to open a modal window!</div>

注意事项

通知后将自动打开,并在一段时间后自我消失:

new jBox('Notice', {
    content: 'Hurray! A notice!'
});

幻灯片放大

Easily attach jBox to images:

new jBox('Image');

<a href="/image1_large.jpg" title="My title 1" data-jbox-image="gallery1"><img src="/image1_small.jpg" alt=""></a>
<a href="/image2_large.jpg" title="My title 2" data-jbox-image="gallery1"><img src="/image2_small.jpg" alt=""></a>
<a href="/image3_large.jpg" title="My title 3" data-jbox-image="gallery1"><img src="/image3_small.jpg" alt=""></a>

了解更多

这三个例子都是很基本的。该jBox库非常强大,提供了一个广阔的多种选择来定制外观和行为。了解更多的文档中:http://stephanwagner.me/jBox/documentation 查看

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

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

还没有评论!

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