jBox是一个强大和灵活的jQuery插件，用于创建你所有的模态窗口，提示，通知或更多。

基本

有两种简单的方法创建jBox，你可以使用jQuery选择器或者创建一个jBox实例。下面是两个功能一样的实例：

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

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

先设置一个可选类型(即通知类型)，你也可以通过 new jBox(options)设置你的选项。已保存的类型解决了每一次你自己去定义的麻烦。参照

你可以使用这些类型：Tooltip, Mouse, Modal, Confirm, Notice, Image.

要在变量中保存你的实例，你可以使用jBox方法：

var myModal = new jBox('Modal', {

content: 'This is my jBox'

});

myModal.open();

记得把你的JavaScript 代码放到 $(document).ready(function() {});里面哦。

jBox添加元素

使用jQuery选择器或者使用attach方法添加你的元素到jBox。在以下的例子中，当你点击带有id="myModal"的元素时，jBox将会打开或者关闭。

new jBox('Modal', {

attach: $('#myModal'),

title: 'Hurray!',

content: 'This is my modal window'

});

当你把鼠标放到元素上时提示工具会打开，当你点击元素时模态窗口会打开。这个动作是在trigger选项中定义的，你可以把它设置为click或 mouseenter。

下面的代码，当你点击元素时提示工具会打开，而不是鼠标放上去时。

$('.tooltip').jBox('Tooltip', {

trigger: 'click'

});

Click me!

Click me!

打开和关闭

如果你想进一步的控制jBox，使用 open(), close() 或者toggle()方法。

var myModal = new jBox('Modal');

Open jBox!

Close jBox!

Toggle jBox!

你可以使用 delayOpen 和 delayClose选项延迟打开和关闭：

$('.tooltip').jBox('Tooltip', {

delayOpen: 500,

delayClose: 1000

});

想要强制立即打开或者关闭，对open 或者 close 方法使用ignoreDelay选项即可：

myTooltip.close({ignoreDelay: true});

内容

给jBox增加内容的最简单方法就是使用 title 和 content选项。要使内容独立于附加元素，使用 getTitle 和 getContent选项。

$('.tooltip').jBox('Tooltip', {

getTitle: 'data-jbox-title',

getContent: 'data-jbox-content'

});

Hover me!

Hover me!

如果你有很多内容，可以创建一个元素让jBox抓取。

$('#myModal').jBox('Modal', {

title: 'Grab an element',

content: $('#grabMe')

});

要让设置的内容显示，使用setTitle 和 setContent方法：

var myModal = $('#myModal').jBox('Modal');

myModal.setTitle('Hello!').setContent('Some content...');

如果设置了一个标题或内容导致jBox尺寸改变，jBox将会复位。为了避免这种情况，用true作为第二选项：.setContent(content, true)。

jBox也能够很容易地使用AJAX加载内容：

$('#myModal').jBox('Modal', {

ajax: {

url: '/example.php',

data: 'id=1',

reload: true

}

});

如果你设置reload 为true，那么jBox每次打开都会重新载入内容。

位置

使用target, position和 outside选项，你可以把jBox放到任何元素的任何位置。

$('.tooltip').jBox('Tooltip', {

target: $('#anotherElement'),

position: {

x: 'left',

y: 'top'

},

outside: 'x'

});

你的 target可以是任何元素，包括 $(window)。

position选项是一个包含x水平对齐和y垂直对齐的对象。

使用x,y或者 xy，配合outside选项你可以移动你的jBox到你目标元素的外面。

当jBox被打开或者你设置了内容，jBox将会计算它的位置。当窗口大小改变，如果你想重新让jBox计算位置，使用reposition选项。

当jBox在可视窗口区域外面时，如果你想让你的jBox调整它的位置，使用adjustPosition和 adjustTracker选项：

$('.tooltip').jBox('Tooltip', {

adjustPosition: true,

adjustTracker: true

});

当你滚动浏览器或者重置窗口大小时，adjustTracker选项能够确保位置自适应。注意，当你的jBox在外部位置时，位置只能得到调整。

指针

pointer选项给你的jBox增加一个指针。注意你的jBox要有一个外部位置。

你也可以定义你的指针放置到哪或者偏移距离：

$('.tooltip1').jBox('Tooltip', {pointer: 'left'});

$('.tooltip2').jBox('Tooltip', {pointer: 'center:-100'});

$('.tooltip3').jBox('Tooltip', {pointer: 'right:60'});

动画

你可以通过fade选项设置渐变动画的持续时间。

jBox也有一些自己的CSS动画：zoomIn, zoomOut, pulse, move, slide, flip,tada.

$('#myModal').jBox('Modal', {animation: 'zoomIn'});

为正在打开和正在关闭使用不同的动画，使用一个对象：{open: 'tada', close: 'flip'}

你也可以使用move和slide动画设置方向：{open: 'move:right',close: 'slide:top'}

渐变动画支持跨浏览器，为了动画效果你需要一个现代浏览器，或者是IE10以上版本。

事件

你可以使用以下事件：onInit, onCreated, onOpen, onClose,onCloseComplete。

注意，在事件功能中你可以使用 this关键字，它指向你的jBox对象：

$('#myModal').jBox('Modal', {

onOpen: function() {

this.setContent('jBox is opening…');

},

onClose: function() {

this.setContent('jBox is closing…');

}

});

官方文档(英文):https://stephanwagner.me/jBox/documentation

源码下载:https://github.com/StephanWagner/jBox/releases

转载自:http://www.ldstars.com/js/210.html

功能演示:https://stephanwagner.me/jBox