jQuery UI dialog is not draggable or resizable
I am having issues getting a dialog to be draggable and resizable. All the documentation and questions on this make it sound straightforword, but I cannot get it to work. Any idea what I may doing wrong?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4开发者_Go百科.4.min.js"></script>
<SCRIPT TYPE="text/javascript" SRC="js/jquery-ui-1.8.10.custom.min.js"></SCRIPT>
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$('#dialog-form').dialog({
// autoOpen: false,
height: 400,
width: 350,
modal: true,
draggable: true,
resizable: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
alert('here');
}
});
});
</SCRIPT>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<style>
#dialog-form label {float:left; width:100px;}
</style>
</head>
<body>
<div id="dialog-form" title="Create new product">
<form>
<fieldset>
<label for="pt">Product Type</label>
<input type="text" name="pt" id="pt" class="text ui-widget-content ui-corner-all" />
<br>
<label for="prod">Producer</label>
<input type="text" name="prod" id="prod" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</body>
</html>
That is because the draggable script is not self-containing. You also need to include a mouse event handling library.
<script src="...../ui/jquery.ui.mouse.js"></script>
additionally to
<script src="...../ui/jquery.ui.draggable.js"></script>
Performance-Note: dropping and dragging functionality adds roughly 45kb (uncompressed) of additional javascript. This is almost as much code as is required to get basic UI functionality out of jquery-ui.
Has to be something in your code that is wrong... are you effectily loading everything and in the right order?
your code in JsBin > http://jsbin.com/uqahu3/edit
works out of the box.
My guess is that you're using IE 6 and are having an issue. If you are using IE 6 try including bgiframe.js http://docs.jquery.com/Plugins/bgiframe
加载中,请稍侯......
精彩评论