Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nightowl888/jquery.dirtyforms.dialogs.facebox.dist
A jQuery Plugin module to enable automatic Facebox dialog support when using jQuery Dirty Forms.
https://github.com/nightowl888/jquery.dirtyforms.dialogs.facebox.dist
Last synced: 5 days ago
JSON representation
A jQuery Plugin module to enable automatic Facebox dialog support when using jQuery Dirty Forms.
- Host: GitHub
- URL: https://github.com/nightowl888/jquery.dirtyforms.dialogs.facebox.dist
- Owner: NightOwl888
- License: mit
- Created: 2015-06-29T19:13:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-01-30T11:15:39.000Z (almost 9 years ago)
- Last Synced: 2024-11-10T13:26:12.123Z (6 days ago)
- Language: JavaScript
- Homepage: https://github.com/snikch/jquery.dirtyforms
- Size: 17.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.myget.org/)
# jquery.dirtyforms.dialogs.facebox
This is a dialog module for the [jQuery Dirty Forms](https://github.com/snikch/jquery.dirtyforms) project.
## Purpose
This module causes Dirty Forms to use Facebox as its dialog when the user attempts to leave the page by clicking a hyperlink (but not when interacting with the navigation buttons of the browser).
> Only 1 dialog module can be used by Dirty Forms at a time. The default behavior without this package is to use the browser's built in dialog that is fired by the `beforeunload` event.
## Prerequisites
Prerequesites must be included in this order:
- [jQuery](http://jquery.com) (>= 1.4.2) - Stashing support for select elements requires jQuery >= 1.6
- [jquery.facebox](https://github.com/NightOwl888/facebox) (>= 1.4.1) - both the CSS and JS
- [jquery.dirtyforms](https://github.com/snikch/jquery.dirtyforms) (>= 1.0.0)
> If you are using a [Package Manager](#package-managers), these dependencies will be installed automatically, but depending on your environment you may still need to add references to them manually.
## Download & Installation
There are several different ways to get the code. Some examples below:
#### CDN
The Facebox dialog module is available over jsDelivr CDN and can directly be included on every page.
```HTML
```
jsDelivr also supports [on-the-fly concatenation of files](https://github.com/jsdelivr/jsdelivr#load-multiple-files-with-single-http-request), so you can reference only 1 URL to get jQuery, jquery.facebox, jquery.dirtyforms, and jquery.dirtyforms.dialogs.facebox in one request.
```HTML
```
#### Self-Hosted
Download and save one of two available files to include the Facebox dialog module to your page, either the [latest distribution](https://raw.githubusercontent.com/NightOwl888/jquery.dirtyforms.dialogs.facebox.dist/master/jquery.dirtyforms.dialogs.facebox.js) or the [latest minified](https://raw.githubusercontent.com/NightOwl888/jquery.dirtyforms.dialogs.facebox.dist/master/jquery.dirtyforms.dialogs.facebox.min.js) version.
```HTML
```
You can also conveniently get all of the latest Dirty Forms files in one [Zip Download](https://github.com/NightOwl888/jquery.dirtyforms.dist/archive/master.zip).
#### Package Managers
The Facebox dialog module is even available through [NPM](http://npmjs.org), [Bower](http://bower.io), and [NuGet](https://www.nuget.org/). Just use one of the following commands below to install the dialog module, including all dependencies.
[](http://www.npmjs.org/package/jquery.dirtyforms.dialogs.facebox)
[](http://bower.io/search/?q=jquery.dirtyforms.dialogs.facebox)
[](https://www.nuget.org/packages/jquery.dirtyforms.dialogs.facebox/)
[](https://nodei.co/npm/jquery.dirtyforms.dialogs.facebox/)
```
// NPM
$ npm install jquery.dirtyforms.dialogs.facebox
// Bower
$ bower install jquery.dirtyforms.dialogs.facebox
// NuGet
PM> Install-Package jquery.dirtyforms.dialogs.facebox
```
## SourceMaps
A [SourceMap](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1) file is also available via CDN or your favorite package manager.
#### CDN
```HTML
```
#### Package Managers
NPM, Bower, and NuGet will install the SourceMap file into the destination directory.
```
jquery.dirtyforms.dialogs.facebox.min.js.map
```
## Usage
This dialog module is automatic. Simply include the reference to the dialog module after the [prerequisites](#prerequisites) and use Dirty Forms [as per the documentation](https://github.com/snikch/jquery.dirtyforms#usage) and Facebox [as per the documentation](http://github.com/NightOwl888/jquery.facebox).
```HTML
// CSS
// JavaScript
```
> If not using a CDN, you need to apply the dependencies in the same order as in the example above.
## Options
The following options are available to set via **$.DirtyForms.dialog.OPTIONNAME = OPTIONVALUE** or get via **OPTIONVALUE = $.DirtyForms.dialog.OPTIONNAME**
Name
Type
Default
Description
title
string
'Are you sure you want to do that?'
Sets the title of the dialog.
proceedButtonClass
string
''
Sets the CSS class of the continue button of the dialog (an HTML anchor tag element).
proceedButtonText
string
'Leave This Page'
Sets the text of the continue button of the dialog.
stayButtonClass
string
''
Sets the CSS class of the cancel button of the dialog (an HTML anchor tag element).
stayButtonText
string
'Stay Here'
Sets the text of the cancel button of the dialog.
stashSelector
string
'#facebox .content'
When using stashing, setting this selector chooses the element of the modal dialog containing your form that will be included in the stash and later restored during unstash (if the user clicks cancel).
> For information about stashing, see the [Modal Dialog Stashing](https://github.com/snikch/jquery.dirtyforms#modal-dialog-stashing) section.
## Support
For help or to report a bug please [open an issue](https://github.com/snikch/jquery.dirtyforms/issues/new) at the [Dirty Forms development site](https://github.com/snikch/jquery.dirtyforms/).