88 lines
2 KiB
Markdown
88 lines
2 KiB
Markdown
|
# jBox
|
||
|
|
|
||
|
|
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
|
||
|
|
|
||
|
|
Demo: https://stephanwagner.me/jBox
|
||
|
|
|
||
|
|
Docs: https://stephanwagner.me/jBox/documentation
|
||
|
|
|
||
|
|
|
||
|
|
## Tooltips
|
||
|
|
|
||
|
|
Create a new instance of jBox Tooltip and attach it to elements:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
new jBox('Tooltip', {
|
||
|
|
attach: '.tooltip'
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Now elements with `class="tooltip"` will open tooltips:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<span class="tooltip" title="My first tooltip">Hover me!</span>
|
||
|
|
<span class="tooltip" title="My second tooltip">Hover me!</span>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Modal windows
|
||
|
|
|
||
|
|
You can set up modal windows the same way as tooltips.
|
||
|
|
But most of times you'd want more variety, like a title or HTML content:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
new jBox('Modal', {
|
||
|
|
width: 300,
|
||
|
|
height: 200,
|
||
|
|
attach: '#myModal',
|
||
|
|
title: 'My Modal Window',
|
||
|
|
content: '<i>Hello there!</i>'
|
||
|
|
});
|
||
|
|
```
|
||
|
|
```html
|
||
|
|
<div id="myModal">Click me to open a modal window!</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
## Confirm windows
|
||
|
|
|
||
|
|
Confirm windows are modal windows which requires the user to confirm a click action on an element.
|
||
|
|
Give an element the attribute data-confirm to attach it:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
new jBox('Confirm', {
|
||
|
|
confirmButton: 'Do it!',
|
||
|
|
cancelButton: 'Nope'
|
||
|
|
});
|
||
|
|
```
|
||
|
|
```html
|
||
|
|
<div onclick="alert('Yay! You did it!')" data-confirm="Do you really want to do this?">Click me!</div>
|
||
|
|
<a href="https://stephanwagner.me/jBox" data-confirm="Do you really want to leave this page?">Click me!</a>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Notices
|
||
|
|
|
||
|
|
A notice will open automatically and destroy itself after some time:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
new jBox('Notice', {
|
||
|
|
content: 'Hurray! A notice!'
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Images
|
||
|
|
|
||
|
|
To create image windows you only need following few lines:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
new jBox('Image');
|
||
|
|
```
|
||
|
|
```html
|
||
|
|
<a href="/image-large.jpg" data-jbox-image="gallery1" title="My image"><img src="/image.jpg" alt=""></a>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Learn more
|
||
|
|
|
||
|
|
These few examples are very basic.
|
||
|
|
The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior.
|
||
|
|
Learn more in the documentation: https://stephanwagner.me/jBox/documentation
|