jQuery UI 设置绝对对话框位置不执行任何操作
jQuery UI setting absolute dialog position does nothing
我想设置 jQuery UI (1.12.1) 对话框的绝对位置(x 和 y)。从各方面来看,我应该能够这样做(尽管 jQuery 文档莫名其妙地没有提到这种语法,here nor here 也没有):
$('#element').dialog('option', 'position', [x, y]);
成功使用此语法的示例如下:
- jQuery UI dialog positioning
- Can I make jquery dialog position independent of window size?
- 很多其他地方。
然而,当我尝试这样做时,没有任何反应。考虑以下示例(可能想要 运行 全屏):
$('#test').dialog({
width: 200,
height: 200
});
$('#move').click(function () {
$('#test').dialog('option', 'position', [30, 30]);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>
运行它,按下按钮,对话框不动。
为什么这对我不起作用?如何设置对话框的 x,y 位置?
请注意,位置更改后对话框必须保持可拖动和可调整大小。
我想我让它工作了..通过使用
position: { my: "left top", at: "left+"+x+" top+"+y+"", of: window }
并通过阅读 .position()
documentation
我达到了这个
$('#test').dialog({
width: 200,
height: 200
});
$('#move').click(function () {
var x = 30,
y = 30;
$('#test').dialog({
//position: { my: "left top", at: "left bottom", of: window }
position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>
我想设置 jQuery UI (1.12.1) 对话框的绝对位置(x 和 y)。从各方面来看,我应该能够这样做(尽管 jQuery 文档莫名其妙地没有提到这种语法,here nor here 也没有):
$('#element').dialog('option', 'position', [x, y]);
成功使用此语法的示例如下:
- jQuery UI dialog positioning
- Can I make jquery dialog position independent of window size?
- 很多其他地方。
然而,当我尝试这样做时,没有任何反应。考虑以下示例(可能想要 运行 全屏):
$('#test').dialog({
width: 200,
height: 200
});
$('#move').click(function () {
$('#test').dialog('option', 'position', [30, 30]);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>
运行它,按下按钮,对话框不动。
为什么这对我不起作用?如何设置对话框的 x,y 位置?
请注意,位置更改后对话框必须保持可拖动和可调整大小。
我想我让它工作了..通过使用
position: { my: "left top", at: "left+"+x+" top+"+y+"", of: window }
并通过阅读 .position()
documentation
我达到了这个
$('#test').dialog({
width: 200,
height: 200
});
$('#move').click(function () {
var x = 30,
y = 30;
$('#test').dialog({
//position: { my: "left top", at: "left bottom", of: window }
position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>