Knowledge Transfer.........: jQuery UI Widget : Dialog

This widget is used to create a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the '+' icon by default.
f the content length exceeds the maximum height, a scrollbar will automatically appear.
A bottom button bar and semi-transparent modal overlay layer are common options that can be added.
A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close').
To create a dialog box containing text of a element like div, we use :
$("#dialog").dialog();

For options, events ,method and theming click here
EXAMPLE :
dialog.html

<!DOCTYPE html>

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs

/jqueryui/1.8/themes/base/jquery-ui.css"              rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

</script>

<script>

$(document).ready(function() {

$("#dialog").dialog();

});

</script>

</head>

<body style="font-size:62.5%;">



<div id="dialog" title="Dialog Title">This is a dialog box</div>



</body>

</html>

Output :

Download Source Code

Knowledge Transfer.........

Wednesday, May 25, 2011

jQuery UI Widget : Dialog

No comments:

Post a Comment