Overview   Seperator   Blog   Seperator   Wiki   Seperator   Forums   Seperator   
login   Seperator   signup   Seperator   Search   Seperator   Feeds   Seperator   Dekoh.Com

Table of Contents

Dialog Widget

This JavaScript adds a window in a HTML page. It is based on Prototype and script.aculo.us libraries. By including effects.js script, you can use script.aculo.us effects to show and hide windows. The widget has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.

Features

  • Valid HTML/XHTML generated code
  • Resizable windows
  • Minimize/Maximize
  • Modal dialogs
  • Visual effects
  • Skinnable

How to use

To use the Dialog Widget, add this code to the head section of the page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css" title="currentStyle" media="screen">
  @import '<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>';
</style>
<script type="text/JavaScript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>">
</script>
<script type="text/JavaScript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>">
</script>

JavaScript code

Include this code in the page: 

function openDialog(){
var idailogContent='Adding the content here <b>This can even take the html code</b>'; 
var idialog = new dekohDialog('dialog_ID',{title:"My Dialog",height:200,width:400, content: idailogContent,topMessage:'This is sample dialog'});
}

HTML Code

Include this code where you want to invoke the dialog: 

<input type='button' value='Open Dialog' onclick='JavaScript:openDialog();'/>

Customizing Dialog Widget

A good guide to creating a new look and feel can be found here

Create a CSS file for the dialog's look and feel and reference the new className (the default className used by the widget is 'Dekoh') as an optional parameter (see below).

How to use

To customizing the Dialog Widget, add this code to the head section of the page: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script type="text/JavaScript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>">
</script>
<script type="text/JavaScript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>">
</script>

JavaScript code

<script  type="text/javascript" xml:space="preserve">
  function openDialog(){
	var idailogContent='Adding the content here <b>This can even take the html code</b>';
	var idialog = new dekohDialog('dialog_ID',{className:'YOUR_CLASS',title:"My Dialog",height:200,width:400, content: idailogContent,topMessage:'This is sample dialog'});}
</script>

HTML Code

Include this code where you want to invoke the dialog: 
<input type='button' value='Open Dialog' onclick='JavaScript:openDialog();'/>

Parameters used by the widget

Required parameters

OptionsSinceDescriptionDefault
IdV1.0Dialog Id-

Optional parameters

OptionsSinceDescriptionDefault
classNameV1.0The style classDekoh
titleV1.0Title of the dialog
widthV1.0Width of the dialog200
heightV1.0Height of the dialog300
minWidthV1.0Minimum width of the dialog200
minHeightV1.0Minimum height of the dialog300
resizableV1.0Specify if the dialog is resizable or not. The values are ‘true’ for making the dialog resizable or ‘false’ otherwise.false
closableV1.0Specify whether the dialog is closable or nottrue
minimizableV1.0Works with resizable value set to ‘true’. The value defined for this is ‘true’ or ‘false’ depends on whether you want to make dialog minimized false
maximizableV1.0Works with resizable value set to ‘true’. The value defined for this is ‘true’ or ‘false’ depends on whether you want to make dialog maximizedfalse
draggableV1.0The value defined for this is ‘true’ or ‘false’ depends on whether you want to make dialog draggabletrue
showEffectV1.0Specify the effect to show the dialogEffect.Appear
hideEffectV1.0Specify the effect when the dialog is closedEffect.Fade
showEffectOptions
hideEffectOptions
effectOptions
parent
onload
xPos
yPos
content
topMessage
toolBarContent
isModal
V1.0Specify the scripatculous effect parameter when the showEffect is specified{duration:0.6}
hideEffectOptionsV1.0Specify the scripatculous effect parameter when the hideEffect is specified{duration:0.1}
effectOptionsV1.0 null
parentV1.0Specify the parent html element on the page where the dialog is going to loadbody
onloadV1.0 Prototype.emptyFunction
xPosV1.0Specify the x position of the dialog in the document 0
yPosV1.0Specify the y position of the dialog in the document0
contentV1.0Specify the content of the dialog. This essentially is the layout of the functionality and features which you may want to present to the user
topMessageV1.0The Help message specifying the functionality of the dialog
toolBarContentV1.0Toolbar content is the html content which is presented at bottom section of the dialog
isModalV1.0Specify whether the dialog is modal or nottrue

Functions

FunctionParametersDescription
closeDialogdialogIdThis function closes an open dialog.

Availability

Dekoh Portal Ver 0.4.2 or later.

Acknowledgements

Dekoh Dialog widget is based on the prototype window (http://prototype-window.xilinus.com/) class.

Attachments

thumbnailmaker_widget.jpg Info on thumbnailmaker_widget.jpg 44045 bytes