<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="css/ui-lightness/jquery-ui-1.10.2.custom.css" rel="stylesheet">
<style type="text/css">
#tabs {height:600px; width: 1200px;}
body { font-size: 62.5%; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
<script>
function create_dial(){
var dialogOpenner = $( "#dlg-window" ).dialog({
dialogClass: "no-close",
resizable: false,
height:240,
width: 350,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialogOpenner.dialog('open');
}
$(function() {
$( "#tabs" ).tabs();
$( "#datepicker" ).datepicker();
$( "#dialog-window" ).dialog({
resizable: false,
height:340,
modal: false,
buttons: {
"Open new Window": function() {
create_dial();
return false;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<div id="dialog-window" title="Example with Dialog">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<input type="text" name="datepicker" id="datepicker" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="dlg-window" title="Another window"> </div>
</div>
<div id="tabs-2">
<p>Morbi purus.</p>
</div>
<div id="tabs-3">
<p>Mauris hendrerit.</p>
</div>
</div>
<div id="dialog-window" title="Example with Dialog">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<input type="text" name="datepicker" id="datepicker" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<div id="dlg-window" title="Another window"> </div>
</body>
</html>