<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Tutorial Demo: How to create floating dialog windows using jQuery plug-ins</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<style type="text/css">
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px
}
#layer1
{
position: absolute;
left:200px;
top:100px;
width:250px;
background-color:#f0f5FF;
border: 1px solid #000;
z-index: 50;
}
#layer1_handle
{
background-color:#5588bb;
padding:2px;
text-align:center;
font-weight:bold;
color: #FFFFFF;
vertical-align:middle;
}
#layer1_content
{
padding:5px;
}
#close
{
float:right;
text-decoration:none;
color:#FFFFFF;
}
h1, h2
{
font-size:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$('#layer1').Draggable(
{
zIndex: 20,
ghosting: false,
opacity: 0.7,
handle: '#layer1_handle'
}
);
$('#layer1_form').ajaxForm({
target: '#content',
success: function()
{
$("#layer1").hide();
}
});
$("#layer1").hide();
$('#preferences').click(function()
{
$("#layer1").show();
});
$('#close').click(function()
{
$("#layer1").hide();
});
});
</script>
<h2>JQuery Tutorial Demo: Floating Dialog Windows</h2>
<p>Here is the demo on using floating dialog windows by using the form and interface plug-in of jQuery</p>
<div id="content"><input type="button" id="preferences" value="Edit Preferences" /></div>
<div id="layer1">
<div id="layer1_handle">
<a href="#" id="close">[ x ]</a>
Preferences
</div>
<div id="layer1_content">
<form id="layer1_form" method="post" action="save_settings.php">
Display Settings<br />
<input type="radio" name="display" checked="checked" value="Default" />Default<br />
<input type="radio" name="display" value="Option A" />Option A<br />
<input type="radio" name="display" value="Option B" />Option B<br /><br />
Autosave settings<br />
<input type="radio" name="autosave" checked="checked" value="Enabled" />Enabled<br />
<input type="radio" name="autosave" value="Disabled" />Disabled<br /><br />
<input type="submit" name="submit" value="Save" />
</form>
</div>
</div>
</body>
</html>
评论0