本文提供了一个简单的示例，展示了如何在 jQuery UI 中使用 Position 方法来实现元素定位，包括如何将一个元素相对于另一个元素进行精确对齐。
Position 的简单使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI ExamplePage</title>
<scriptsrc="js/jquery-1.10.2.js"></script>
<scriptsrc="js/jquery-ui-1.10.4.custom.js"></script>
<link rel="stylesheet"href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
<style type="text/css">
#cont1{
border:1px solid gray;
width:100px;
height:100px;
background:green;
z-index:10;
}
#cont2{
border:1px solid gray;
width:150px;
height:150px;
background:gray;
}
</style>
<script>
$(function(){
//of 表示在容器2中，my"center top" 意思是用我的上边框的中心 (at:"centertop") 对齐在of容器中的center top
//如果你这个写在下面那么就不会居中了，因为被覆盖掉了
//如果是重叠覆盖可以去修改z-index
$("#cont2").position({of:$(window)});
$("#cont1").position({
of:$("#cont2"),
my:"center top",
at:"center top"
});
});
</script>
</head>
<body>
<h1>position的使用</h1>
<div id="cont1">容器一</div>
<div id="cont2">容器二</div>
</body>
</html>
扫一扫
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
