可以,赞一个,还有初始化的时候想要在当前视窗之外的需要修改jquery.ui.dialog.js 里面的 using: function( pos ) { var topOffset = $( this ).css( pos ).offset().top; $( this ).css( "top",700 ); // 需要修改要该这里,妈蛋 if ( topOffset < 0 ) { $( this ).css( "top", pos.top - topOffset ); } }
设置dialog不可以拖动,然后获取容器增加draggable <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.draggable.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.dialog.js"></script> <link rel="stylesheet" href="../demos.css"> <script> $(function () { //////////////////注意这里要获取到父容器,而不是dialog对象,jquery UI会增加一个div容器来括起id=dialog的对象 $("#dialog").dialog({ draggable: false }).closest('.ui-dialog').draggable(); }); </script> </head> <body><div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div><div class="demo-description"> <p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> </div> </body> </html>
刚才研究了下,初始化显示在当前视窗之外可以dialog.js中修改collision属性 position: { my: "center", at: "center", of: window, collision: "flip",// 默认是fit,在position.js中数组的属性 // Ensure the titlebar is always visible using: function( pos ) { var topOffset = $( this ).css( pos ).offset().top; if ( topOffset < 0 ) { $( this ).css( "top", pos.top - topOffset ); } } },
怎么增加啊,是在draggable属性里面增加一个function么
$(".ui-dialog").draggable("option","containment",false);他没接口。
jquery.ui.dialog.js中
写死了。 containment: "document",
this.uiDialog.draggable({
cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
handle: ".ui-dialog-titlebar",
containment: "document",
start: function( event, ui ) {
$( this ).addClass("ui-dialog-dragging");
that._blockFrames();
that._trigger( "dragStart", event, filteredUi( ui ) );
},
drag: function( event, ui ) {
that._trigger( "drag", event, filteredUi( ui ) );
},
stop: function( event, ui ) {
options.position = [
ui.position.left - that.document.scrollLeft(),
ui.position.top - that.document.scrollTop()
];
$( this ).removeClass("ui-dialog-dragging");
that._unblockFrames();
that._trigger( "dragStop", event, filteredUi( ui ) );
}
});
using: function( pos ) {
var topOffset = $( this ).css( pos ).offset().top;
$( this ).css( "top",700 ); // 需要修改要该这里,妈蛋
if ( topOffset < 0 ) {
$( this ).css( "top", pos.top - topOffset );
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.2.js"></script>
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function () {
//////////////////注意这里要获取到父容器,而不是dialog对象,jquery UI会增加一个div容器来括起id=dialog的对象
$("#dialog").dialog({ draggable: false }).closest('.ui-dialog').draggable();
});
</script>
</head>
<body><div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div><div class="demo-description">
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
</div>
</body>
</html>
position: {
my: "center",
at: "center",
of: window,
collision: "flip",// 默认是fit,在position.js中数组的属性
// Ensure the titlebar is always visible
using: function( pos ) {
var topOffset = $( this ).css( pos ).offset().top;
if ( topOffset < 0 ) {
$( this ).css( "top", pos.top - topOffset );
}
}
},