I am starting to
learn jQuery for a current job I am working on.
I thought I would put up some notes I am writing on the subject as I
study it. I am sure there are far
better notes and sites out there to learn jQuery from, given my current level
of beginner. But who knows, maybe you
are a beginner to and you might find this useful.
I have a need to
create a modal dialog in a page (a pop
in alert). And this dialog needs to have
a notification and a few buttons on it.
I will be using the
jquery hosted libraries from google. For
more information on these you can go see their site https://developers.google.com/speed/libraries/devguide#jquery
[1]
Also since I need to use a theme I might as well use a
hosted one. Turns out google hosts some
themes. I found this site that lists
several jQuery themes and their google hosted location http://www.stemkoski.com/jquery-ui-1-7-2-themes-list-at-google-code/
[2]
Being a newbie I want to see what the different themes look
like before I choose one. jQuery has a nice page for viewing a UI before
choosing one http://jqueryui.com/themeroller/
[3]
From this page Click on Gallery, this will bring up a selection of themes you
can click on to see their different widgets.
Click any Theme you want to view. As an example I clicked on UI darkeness
It shows how the buttons would look like.
After pocking around I decided to use the smoothness theme
which is hosted at google at http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css
First Dialog Window
The Jquery folks have a nice page that goes over the dialog
widget, its located at http://jqueryui.com/dialog/
[5]
The api information for dialog can be found at
Below is some HTML
for a very basic dialog
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
<script>
$(function () {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Dialog
TitleBar">
<p>This is a basic
dialog window, it can be closed by pushing the x in the upper right </p>
</div>
</body>
</html>
|
The result is this. A
dialog box that can be dragged anywhere by its title bar, It can be resized,
and to close it click the X in the upper right
To make it a fixed size set the resizeable to false
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
<script>
$(function () {
$("#dialog").dialog({
resizable: false
});
});
</script>
</head>
<body>
<div id="dialog" title="Dialog
TitleBar">
<p>This is a basic
dialog window, it can be closed by pushing the x in the upper right </p>
</div>
</body>
</html>
|
Now it can't be resized
Make it Modal
Make the dialog
modal will cause it to grey out the rest of the screen and not allow any
interaction with the rest of the page until it has been closed.
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
<script>
$(function () {
$("#dialog").dialog({
resizable: false,
modal: true
});
});
</script>
</head>
<body>
<div id="dialog" title="Dialog
TitleBar">
<p>This is a basic
dialog window, it can be closed by pushing the x in the upper right </p>
</div>
<h1>
Testing this text
</h1>
</body>
</html>
|
Now you can't interact with the rest of the page until the
dialog is closed.
Create a modal dialog that has an OK button to close it
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
<script>
$(function () {
$("#dialog").dialog({
resizable: false,
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Dialog
TitleBar">
<p>This is a basic
dialog window, it can be closed by pushing the x in the upper right </p>
</div>
<h1>
Testing this text
</h1>
</body>
</html>
|
You can add as many buttons as you want. In this example I created two buttons. The both close the dialog box, but you could
add more JavaScript in there to have them do something.
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />
<script>
$(function () {
$("#dialog").dialog({
resizable: false,
modal: true,
buttons: {
cancel: function () {
$(this).dialog("close");
},
proceed: function () {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Dialog
TitleBar">
<p>This is a basic
dialog window, it can be closed by pushing the x in the upper right </p>
</div>
<h1>
Testing this text
</h1>
</body>
</html>
|
Well that got me what I wanted a modal dialog with multiple buttons.
So I will right this up as a small success in learning
jQuery.
References
[1] jQuery
google hosted
Accessed
05/2013
[2] jQuery
UI 1.7.2 Themes List at Google Code
Ryan
Stemkoski
Accessed
05/2013
[3] jQuery
Theme Roller
Accessed
05/2013
[4] jQuery
Dialog API
Accessed
05/2013
[5] jQuery
Dialog
Accessed
05/2013
No comments:
Post a Comment