JS Tutorial
- Overview
- Documents
jQuery Trumpet.js is a jQuery plugin that adds customisable alert and confirm boxes.
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="/path/to/jquery.trumpet.js/dist/jquery.trumpet.css" /> <script src="/path/to/jquery.trumpet.js/dist/jquery.js"></script> <script src="/path/to/jquery.trumpet.js/dist/jquery.trumpet.js"></script>
2. ALERT
$.alert({
style: 'wasabi',
title: 'Saved successfully',
message: 'Your have successfully saved your changes.',
coverBackground: true
});
USAGE
$.alert([Object options]);
options
type: Object
An object literal defining options for the alert box (see table below for all available options).
$('.myElement').alert(String event [, Object options]);
event
type: String
One or more space-separated event types such as "click", or "mouseover".
options
type: Object
An object literal defining options for the alert box (see table below for all available options).
OPTIONS
| Name | Type | Description | Default |
|---|---|---|---|
| style | String | Define a style for the alert box. Options are "heat", "tomato", "mustard" and "wasabi". | Box styled in shades of grey. |
| coverBackground | Boolean | Fill the window with a semi-transparent cover when alert is throw. | false |
| title | String | A title for the alert box. | Alert |
| message | String | A message to display under the title. | |
| acceptButton | String | Text to use for the accept button. | OK |
| onAccept | Function | A callback function to execute when the accept button is clicked. |
3. CONFIRM
$.confirm({
style: 'mustard',
title: 'Delete',
message: 'Are you sure you want to delete this page?',
confirmButton: 'Delete'
});
USAGE
$.confirm([Object options]);
options
type: Object
An object literal defining options for the confirm box (see table below for all available options).
$('.myElement').confirm(String event [, Object options]);
event
type: String
One or more space-separated event types such as "click", or "mouseover".
options
type: Object
An object literal defining options for the confirm box (see table below for all available options).
| Name | Type | Description | Default |
|---|---|---|---|
| style | String | Define a style for the alert box. Options are "heat", "tomato", "mustard" and "wasabi". | Box styled in shades of grey. |
| coverBackground | Boolean | Fill the window with a semi-transparent cover when alert is throw. | false |
| title | String | A title for the confirm box. | Confirm |
| message | String | A message to display under the title. | |
| confirmButton | String | Text to use for the confirm button. | Confirm |
| cancelButton | String | Text to use for the cancel button. | Cancel |
| onConfirm | Function | A callback function to execute when the confirm button is clicked. | |
| onCancel | Function | A callback function to execute when the cancel button is clicked. |
4. ACTIVE CONFIRM
$.activeConfirm({
style: 'heat',
title: 'Delete',
message: 'Are you sure you want to delete this page?',
confirmText: 'DELETE',
confirmButton: 'Delete'
});
Throws a confirm box with an input. The user must enter a string that matches a pre-defined value before they can confirm.
$.activeConfirm([Object options]);
options
type: Object
An object literal defining options for the confirm box (see table below for all available options).
$('.myElement').activeConfirm(String event [, Object options]);
event
type: String
One or more space-separated event types such as "click", or "mouseover".
options
type: Object
An object literal defining options for the confirm box (see table below for all available options).
| Name | Type | Description | Default |
|---|---|---|---|
| style | String | Define a style for the alert box. Options are "heat", "tomato", "mustard" and "wasabi". | Box styled in shades of grey. |
| coverBackground | Boolean | Fill the window with a semi-transparent cover when alert is throw. | false |
| title | String | A title for the confirm box. | Confirm |
| message | String | A message to display under the title. | |
| confirmText | String | A string of text that a user must enter before they can confirm (case sensitive). | CONFIRM |
| confirmButton | String | Text to use for the confirm button. | Confirm |
| cancelButton | String | Text to use for the cancel button. | Cancel |
| onConfirm | Function | A callback function to execute when the user successfully confirms. | |
| onCancel | Function | A callback function to execute when the cancel button is clicked. |
