极客教程jQuery UI position()方法
jQuery UI框架为用户提供了许多实用功能，其中之一就是position()方法。position()方法帮助定位任何元素相对于页面中的任何目标元素，如窗口，任何父元素，文档或鼠标。它根据 “top”、”left”、”right “和 “bottom “等属性来描述任何元素的位置。
注意:
- 它不支持隐藏元素的定位功能。
- 只有子元素是相对于任何其他元素或目标定位的。
语法:
$(selector).position( options )
其中options是定义元素相对于目标或父元素的定位方式的对象类型。我们将只解释其中几个常用的选项。
选项:
- my：它是字符串类型的。这个选项提到了需要与父目标元素对齐的元素的位置。它的默认值是center。
- at。它是字符串类型的。这个选项提到了子元素所处的父目标元素的位置或位置。它的默认值是center。
- of。类型是选择器或父元素。这个选项提到了要对其进行定位的父元素或目标元素。它的默认值是null。
- collision。它是字符串类型的。这个选项提到了当被定位的元素超出文档窗口时的应用规则。默认值是flip。
jQuery UI的链接：
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="样式表" type="text/css" />
例子1：在下面的例子中，演示了基本的默认position()方法。”divID1 “和 “divID2 “被固定在相对于父元素 “mainDivID “的 “my “和 “at “位置。鼠标事件是为 “divID3 “处理的。这个位置被设计成在文档中移动，在左边和上面保持10的间隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI position method</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.class {
.height: 10px;
}
.subDivClass {
position: absolute;
width: 80px;
height: 80px;
background: green;
padding: 10px 10px;
}
#mainDivID {
width: 300px;
height: 300px;
padding-top: 50px;
background: #e9e9e9;
border: 1px solid black
}
</style>
<script>
(function() {
// Position to the center with respect to the parent mainDivID
("#divID1").position({
my: "center",
at: "center",
of: "#mainDivID"
});
// Position to the top right keeping a gap of 10
("#divID2").position({
my: "right-10 top+10",
at: "right top",
of: "#mainDivID"
});
/* Position to move around
keeping a gap of 10 at the left and top */
(document).mousemove(function(event) {
$("#divID3").position({
my: "left+10 top+10",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI position utility </b>
<div class="height"> </div>
<div id="mainDivID">
<div class="subDivClass" id="divID1">Position 1</div>
<div class="subDivClass" id="divID2">Position 2</div>
<div class="subDivClass" id="divID3">Position 3</div>
</div>
</body>
</html>
输出:
例子2：在下面的例子代码中，position方法与上述所有的选项或参数一起演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI position method</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.height {
height: 10px;
}
#parentDivID {
width: 500px;
height: 120px;
padding: 15px;
border: 1px solid black;
background-color: green;
text-align: center;
}
.positionableClass {
position: absolute;
display: block;
border-radius: 25%;
background-color: #e9e9e9;
text-align: center;
}
#positionableId {
width: 80px;
height: 80px;
}
#optionsDivID {
padding: 10px;
margin-top: 20px;
}
.selectDiv {
padding-bottom: 20px;
}
select {
margin-left: 15px;
}
</style>
<script>
(function() {
function position() {
(".positionableClass").position({
my: ("#myHorizontalID").val() +
" " +("#myVerticalID").val(),
at: ("#atHorizontalID").val()
+ " " +("#atVerticalID").val(),
of: ("#parentDivID"),
collision:("#collHorizontalID").val() +
" " + ("#collVerticalID").val()
});
}
("select").on("click keyup change", position);
$("#parentDivID").draggable({
drag: position
});
position();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI position method </b>
<div class="height"> </div>
<div id="parentDivID">
<p>
This is the parent target element.
</p>
</div>
<div class="positionableClass" id="positionableId">
<p>
Change my position
</p>
</div>
<div id="optionsDivID">
<div class="selectDiv">
<b>Select "my" positions :</b>
<select id="myHorizontalID">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="myVerticalID">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="selectDiv">
<b>Select "at" positions :</b>
<select id="atHorizontalID">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="atVerticalID">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div class="selectDiv">
<b>Select collision options:</b>
<select id="collHorizontalID">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">fit none</option>
</select>
<select id="collVerticalID">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
</div>
</div>
</body>
</html>
输出:
