Mavenous

Navigation

MavDialog v0.1.1 (A mootools more library)

MavDialog is a light-weight, easy to use and customizable replacement for system dialog windows. It contains child classes for replacing the default alert, prompt, and confirm dialog boxes as well. There are options for forcing user input (by preventing user access to the rest of the page) and the message of the dialog box can be loaded from a string, adopted from an existing DOM element, generated by a function, or retrieved by an Ajax request.

MavDialog boxes can be dragged, and use effects for showing/hiding. This is an early version, and most of the CSS customization hasn't been moved out to the options yet, but it is easily done if so desired.

Discussion

For now, all discussion will be located at the unofficial mootools forum. Partly because i think people will probably look there for it anyway, partly i hate setting up forums, and also because right now i'm feeling lazy. ^_^

Discuss MavDialog on the unofficial mootools forum

Download MavDialog

mavDialog requires both mootools core 1.2+ and mootools more 1.2 (atleast the Drag and Drag.Move). You will also need the base CSS classes provided in the file below, as well as the class.MavDialog.js.

Get the newest Mootools Core Example CSS file MavDialog Javascript (Uncompressed) MavDialog Example Zip

Examples

MavDialog Demo

Default Dialog | Alert Dialog | Confirm Dialog | Prompt Dialog

Confirmed:

Prompted:

Also view the MavDialog vanilla example.

Usage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Mavenous MavDialog</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" 
	type="text/css" href="/library/public/mavdialog/mavdialog.css" />

	<script type="text/javascript" 
	src="/library/code/js/core/mootools-1.2.2-core.js"></script>

	<script type="text/javascript" 
	src="/library/code/js/core/mootools-1.2.2.1-more.js"></script>
	<script type="text/javascript" 
	src="/library/public/mavdialog/class.MavDialog.js"></script>
	<script type="text/javascript">

	var mdialog = [];
	function create_mdialog() {
		mdialog[0] = new MavDialog({
			'force': true,
			'title': 'MavDialog Demonstration',
			'message': 'This is the content for the dialog box.',
			'draggable': true
		});
	}

	function create_alertDialog() {
		mdialog[3] = new MavDialog.Alert({
			'title': 'MavDialog Alert Box',
			'message': 'This is the message dialog box'
		});
	}

	function create_confirmDialog() {
		mdialog[4] = new MavDialog.Confirm({
			'title': 'MavDialog Confirm Dialog',
			'message': 'confirm dialog box',
			'callback': display_confirm
		});
	}

	function create_promptDialog() {
		mdialog[5] = new MavDialog.Prompt({
			'title': 'MavDialog Prompt Dialog',
			'message': 'prompt dialog box',
			'callback': display_prompt
		});
	}
	function display_confirm(_confirmed) {
		// do something with _confirmed
	}

	function display_prompt(_prompted) {
		// do something with _prompted
	}
	</script>
</head>
<body>

	<a href="#" onclick="create_mdialog()">Default Dialog</a> |
	<a href="#" onclick="create_alertDialog()">Alert Dialog</a> |
	<a href="#" onclick="create_confirmDialog()">Confirm Dialog</a> |
	<a href="#" onclick="create_promptDialog()">Prompt Dialog</a><br />

</body>
 </html>

Syntax

new MavDialog({
	'title': 'Dialog Header',
	'message': 'This is what will show up in the content of the dialog box.'
});

Arguments

JSON object used to set MavDialog options.
- ```
(Object)
```
  A JSON object containing the options to be set.

Returns

```
(Object)
```
The MavDialog object
```
(null)
```
If an error occurred, null is returned.

Options

```
autoShow Boolean true
```
Whether or not to show the dialog box on instantiation.
```
buttons Object null
```
JSON object to define custom buttons for the dialog box.
```
callback Function null
```
Function to fire upon closing the dialog box.
```
cancel Function null
```
The function to fire upon clicking the close button.
```
cancelDestroy Boolean true
```
Destroy the dialog box upon clicking the cancel button.
```
cancelText String 'Cancel'
```
The text to display for the cancel button.
```
center Boolean true
```
Center the dialog box to parent
```
draggable Boolean false
```
Whether or not the dialog box can be dragged.
```
footer Boolean null
```
Whether or not to display the footer area.
```
force Boolean false
```
Whether or not to force user focus to the dialog box.
```
fxOptions Object {}
```
Additional effects options to set on the Fx object.
```
height Integer 'auto'
```
The height of the dialog content area.
```
message String null
```
The message can be a string, a function, or an HTMLElement.
```
ok Function null
```
The function to fire off when the ok button is clicked.
```
okDestroy Boolean true
```
Whether or not to destroy the dialog box on clicking of the OK button.
```
okText String 'OK'
```
The text to display on the OK button.
```
onClose Function $empty()
```
The function to fire upon closing the dialog box.
```
onComplete Function $empty()
```
The function to fire upon completing the instantiation of the dialog box.
```
onHide Function $empty()
```
The function to fire upon hiding of the dialog box.
```
onRequest Function $empty()
```
The function to fire upon successful completion of a message URL retrieval.
```
onShow Function $empty()
```
The function to fire once the dialog box is shown.
```
parent HTMLObject document.body
```
You can specify the parent element of the dialog box, but it will default to document.body.
```
styles Object {}
```
The CSS styles to apply to the dialog box.
```
title String null
```
The text to display in the title bar area.
```
titleClose Boolean true
```
Whether or not to display a close button on the title bar.
```
url String null
```
The URL to grab the message from.
```
useFx Boolean true
```
Whether or not to use effects on showing and hiding of the dialog box.
```
width String '400'
```
The width of the dialog box.

Compatibility

Tested and working with:

Firefox 2 / Firefox 3
IE 7, IE 8
Opera 9.63
Google Chrome 1.0.154.59

Changelog

v 0.1.1 - April 26th, 2009
- Initial public early beta release.