Clik here to view.
Today I’m going to discuss about how to use jQuery Dialog in HTML Page.
To do this first we have to download the Theme from the jQuery Site. Please go to the below link to download the theme
URL: http://jqueryui.com/themeroller/
Once you go to the page, you will see a ThemeRoller Tabbed Pane like Fig.1. Click on Download theme.
Image may be NSFW.
Clik here to view.
Fig. 1
Once you click the download you will be redirected to a page named “Download Builder”. Go the bottom left corner of this page where you will find the download option. Download the Theme to your local System.
To apply the jQuery Dialog we need three files and images Folder.
1. jQuery Library: To use jQuery functionality we’ll use this and it’ll be available under a path like below. In my local system I have downloaded the theme in this below path
e.g.: D:\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\js\jquery-1.10.2.js
2. jQuery UI Library: To use jQuery Dialog box functionality we need a library and it’ll be available under the below path.
e.g.: D:\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\js\jquery-ui-1.10.4.custom.js
3. jQuery CSS File: To Use the UI styles for jQuery Dialog box we need a CSS file and it’ll be available under the below path.
e.g.: D:\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\css\overcast\jquery-ui-1.10.4.custom.css.
Create an html file with the below code and create another html file with name test.htmlwith some data to use later. In this example I have used a sample html file (test.html) which already contains a calendar control.
In the below code find out the iframe tag which refers to test.html file which will be opened in a dialog box.
<html>
<head>
<title>Jquery Dialog</title>
<linkrel=”stylesheet”href=”jquery-ui-1.10.4.custom.css”>
<scriptsrc=”jquery-1.10.2.js”></script>
<scriptsrc=”jquery-ui-1.10.4.custom.js”></script>
<linkrel=”stylesheet”href=”/resources/demos/style.css”>
<scripttype=”text/javascript”>
$(function () {
$(“#jquerydialog”).dialog({
autoOpen: false,
position: ‘center’,
title: ‘Jquery Dialog’,
draggable: false,
width: 200,
height: 200,
resizable: false,
modal: true,
});
$(“#jqueryscreendialog”).dialog({
autoOpen: false,
position: ‘center’,
title: ‘Jquery File Dialog’,
draggable: false,
width: 600,
height: 600,
resizable: false,
modal: true,
});
$(“#btndialog”).click(function () {
$(“#jquerydialog”).dialog(‘open’);
});
$(“#btnFiledialog”).click(function () {
$(“#jqueryscreendialog”).dialog(‘open’);
});
});
</script>
</head>
<body>
<divid=”jquerydialog”>
Jquery Dialog Opened
</div>
<inputtype=”button”value=”Open dialog”id=”btndialog”/>
<inputtype=”button”value=”Open File dialog”id=”btnFiledialog”/>
<divid=”jqueryscreendialog”>
<iframesrc=”test.html”width=”560″height=”560″></iframe>
</div>
</body>
</html>
Under<head> tag we’re referring to jquery-ui-1.10.4.custom.css and jquery-ui-1.10.4.custom.js files for jQuery Dialog box and jquery-1.10.2.js jQuery Library to run jQuery Code. If all the files exist in same directory where html file resides then there is no need to give the path, just the file name is enough.
I have created a two div tags with id’s jQuerydialog, jQuery screen dialog and two buttons with id’s btndialog, btnFiledialog.
One button with text “Sample text dialog” is used to open dialog box with static text.
One button with text “Open Html File dialog” is used to open html file in a dialog box.
To open dialog box we need to write the code like Fig.2 in onload event in html page. Here I wrote the below code in $(function(){}); it means in onload event we are writing a code for html file and static text to open in dialog box.
Image may be NSFW.
Clik here to view.
Fig. 2
In the above example see line number 10-19. The code is for registering the dialog with attributes like auto open, width, height etc. for Static Text. See the code between line numbers 31-33. It is to register the click event for the button with text “Sample text dialog”. When I click on this button a static text which is placed in div tag will be opened in dialog box like Fig.3
Image may be NSFW.
Clik here to view.
Fig. 3
In the above example see line number 20-29. This code is for registering the dialog with attributes like autoopen, width, height etc. for Html File. See the code between line numbers 34-36. This is for register the click event for the button with text “Open Html File dialog”. When I click on this button an Html File test.html which is referred by iframewhich is placed in div tag will be opened in dialogbox like Fig.4 and if you click a text box which is in dialog box a calendar control is opened. It means the functionality which is working in test.html file will work in dialog box if we refer that html file using iframe tag.
Image may be NSFW.
Clik here to view.
Fig. 4
Open html file in a browser then click on any button. A dialog box will be opened based on the particular event. This is about jQuery Dialog. To know more please visit: http://jqueryui.com/dialog/
By: Jayasankar J.