Dialog Manager

From MapbenderWiki

THIS MODULE IS deprecated. It had been an early wrapper for jQuery UI dialog. It should be replaced by jQuery UI dialog. 

A module to manage dialog windows with highly customizable options.

Module maintainer: Lars Beck

Contents 1 Requirements 2 SQL 3 Parameters 4 Note on CSS 5 Usage 5.1 Methods 5.2 Options 5.3 Simple example without any customization 5.4 Advanced example with several customizations

Requirements

• http/javascripts/mod_dialogManager.js
• http/extensions/jquery.js >= minium v1.3.2
• http/extensions/jquery-ui.js >= 1.7.2
• http/css/dialog.css (including images, see note below)

SQL

INSERT INTO gui_element(fkey_gui_id,e_id,e_pos,e_public,e_comment,e_title,e_element,e_src,e_attributes,e_left,e_top,e_width,e_height,e_z_index,e_more_styles,e_content,e_closetag,e_js_file,e_mb_mod,e_target,e_requires,e_url) VALUES('<GUI title>','dialogManager',5,1,,,'div',,,-1,-1,NULL,NULL,NULL,,,'div','../javascripts/mod_dialogManager.js',,,,);</code>
INSERT INTO gui_element_vars(fkey_gui_id,fkey_e_id,var_name,var_value,context,var_type) VALUES('<GUI title>','body','css_dialog','<path to css file>',,'file/css');

Parameters

optional dialogContent:	string	Content to show insode the dialog, plain or HTML
optional dialogURL:		string	Document to load into dialog
optional dialogDimensions:	array	Width and height of the dialog
optional dialogPosition:	string	Position of the dialog (top, right, bottom, left or center)
optional dialogPosition:	array	Position of the dialog (top and left coordinates)
optional dialogIsModal:	bool	If set to true, the dialog will overlay the application
optional dialogIsResizeable:	bool	If set to true, the dialog will be resizeable
optional dialogIsDraggable:	bool	If set to true, the dialog will be draggable
optional dialogTitle:		string	Title shown on top of the dialog
optional dialogEffectShow:	string	Effect when showing dialog (blind, bounce, clip, drop, explode, fold, highlight, puff, pulsate, scale, shake, size, slide or transfer)
optional dialogEffectHide:	string	Effect when hiding dialog (blind, bounce, clip, drop, explode, fold, highlight, puff, pulsate, scale, shake, size, slide or transfer)

Note on CSS

The required CSS file can be built or customized at http://www.jqueryui.com/themeroller/

Usage

Methods

With a call to dialogManager.openDialog() a dialog is opended with the specified options (example see below). As a reference to this, an objected is returned and can bee assigned to a variable. This provides the method for hiding the dialog by calling to dialogManager.openDialog().

// Shows a simple dialog
var myDialog = Mapbender.modules.dialogManager.openDialog('Hello, world!');

// Hides this dialog by clicking elsewhere
$(document).body.click(function() {
	myDialog.closeDialog();
});

Options

Simple example without any customization

Mapbender.modules.dialogManager.openDialog('Hello, world!');

Advanced example with several customizations

Mapbender.modules.dialogManager.openDialog({
	url:        'http://www.mapbender.org/',
	dimensions: [800,600],
	position:   'top',
	title:      'Mapbender',
	isModal:    false,
	effectHide: 'blind',
});