Jquery多功能提示通知弹出对话框插件jBox中文文档


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

9c1867ec9e297e079a91-600x387

基本

有两种简单的方法创建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'
});

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

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

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

$('.tooltip').jBox('Tooltip', {
    trigger: 'click'
});

<span class="tooltip" title="Tooltip 1">Click me!</span>
<span class="tooltip" title="Tooltip 2">Click me!</span>

打开和关闭

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

var myModal = new jBox('Modal');

<span onclick="myModal.open();">Open jBox!</span>
<span onclick="myModal.close();">Close jBox!</span>
<span onclick="myModal.toggle();">Toggle jBox!</span>

你可以使用 delayOpendelayClose 选项延迟打开和关闭:

$('.tooltip').jBox('Tooltip', {
    delayOpen: 500,
    delayClose: 1000
});

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

myTooltip.close({ignoreDelay: true});

内容

给jBox增加内容的最简单方法就是使用 titlecontent 选项。要使内容独立于附加元素,使用 getTitlegetContent选项。

$('.tooltip').jBox('Tooltip', {
    getTitle: 'data-jbox-title',
    getContent: 'data-jbox-content'
});

<span class="tooltip" data-jbox-title="jBox title 1" data-jbox-content="jBox content 1">Hover me!</span>
<span class="tooltip" data-jbox-title="jBox title 2" data-jbox-content="jBox content 2">Hover me!</span>

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

$('#myModal').jBox('Modal', {
    title: 'Grab an element',
    content: $('#grabMe')
});

<div style="display: none" id="grabMe">I'm your content. Remember to set CSS display to none!</div>

要让设置的内容显示,使用setTitlesetContent 方法:

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
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注