免費(fèi)AI編程助手
jQuery UI 實(shí)例 – 定位（Position）
2022-06-07 15:50 更新
jQuery UI 實(shí)例 - 定位（Position）
相對窗口、文檔、錨、光標(biāo)/鼠標(biāo)等元素定位一個(gè)元素。
如需了解更多有關(guān).position()方法的細(xì)節(jié)，請查看API文檔.position()。
默認(rèn)功能
使用表單控件配置位置，或者拖拽被定位的元素來修改它的偏移量。向四周拖拽父元素來查看碰撞檢測。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 定位（Position） - 默認(rèn)功能</title>
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<style>
#parent {
width: 60%;
height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
}
#positionable1 {
width: 75px;
height: 75px;
}
#positionable2 {
width: 120px;
height: 40px;
}
select, input {
margin-left: 15px;
}
</style>
<script>
$(function() {
function position() {
$( ".positionable" ).position({
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
$( ".positionable" ).css( "opacity", 0.5 );
$( "select, input" ).bind( "click keyup change", position );
$( "#parent" ).draggable({
drag: position
});
position();
});
</script>
</head>
<body>
<div id="parent">
<p>
這是父元素的位置。
</p>
</div>
<div class="positionable" id="positionable1">
<p>
to position
</p>
</div>
<div class="positionable" id="positionable2">
<p>
to position 2
</p>
</div>
<div style="padding: 20px; margin-top: 75px;">
定位...
<div style="padding-bottom: 20px;">
<b>my:</b>
<select id="my_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="my_vertical">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div style="padding-bottom: 20px;">
<b>at:</b>
<select id="at_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="at_vertical">
<option value="top">top</option>
<option value="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div style="padding-bottom: 20px;">
<b>collision:</b>
<select id="collision_horizontal">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
<select id="collision_vertical">
<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>圖像循環(huán)
一個(gè)照片瀏覽器的原型，使用Position分別把圖片定為在左邊、中間、右邊，然后循環(huán)顯示。使用頂部的鏈接來循環(huán)圖像，或者在圖像的左側(cè)或右側(cè)點(diǎn)擊來循環(huán)圖像。請注意，當(dāng)調(diào)整窗口大小時(shí)，會重新定位圖像。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 定位（Position） - 圖像循環(huán)</title>
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" rel="external nofollow" ></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<style>
body {
margin: 0;
}
#container {
overflow: hidden;
position: relative;
height: 400px;
}
img {
position: absolute;
}
</style>
<script>
$(function() {
// 重構(gòu)部件，去除這些插件方法
$.fn.left = function( using ) {
return this.position({
my: "right middle",
at: "left+25 middle",
of: "#container",
collision: "none",
using: using
});
};
$.fn.right = function( using ) {
return this.position({
my: "left middle",
at: "right-25 middle",
of: "#container",
collision: "none",
using: using
});
};
$.fn.center = function( using ) {
return this.position({
my: "center middle",
at: "center middle",
of: "#container",
using: using
});
};
$( "img:eq(0)" ).left();
$( "img:eq(1)" ).center();
$( "img:eq(2)" ).right();
function animate( to ) {
$( this ).stop( true, false ).animate( to );
}
function next( event ) {
event.preventDefault();
$( "img:eq(2)" ).center( animate );
$( "img:eq(1)" ).left( animate );
$( "img:eq(0)" ).right().appendTo( "#container" );
}
function previous( event ) {
event.preventDefault();
$( "img:eq(0)" ).center( animate );
$( "img:eq(1)" ).right( animate );
$( "img:eq(2)" ).left().prependTo( "#container" );
}
$( "#previous" ).click( previous );
$( "#next" ).click( next );
$( "img" ).click(function( event ) {
$( "img" ).index( this ) === 0 ? previous( event ) : next( event );
});
$( window ).resize(function() {
$( "img:eq(0)" ).left( animate );
$( "img:eq(1)" ).center( animate );
$( "img:eq(2)" ).right( animate );
});
});
</script>
</head>
<body>
<div id="container">
<img src="https://atts.w3cschool.cn/attachments/uploads/2014/03/earth.jpg" width="458" height="308" alt="earth">
<img src="https://atts.w3cschool.cn/attachments/uploads/2014/03/flight.jpg" width="512" height="307" alt="flight">
<img src="https://atts.w3cschool.cn/attachments/uploads/2014/03/rocket.jpg" width="300" height="353" alt="rocket">
<a id="previous" href="#">上一個(gè)</a>
<a id="next" href="#">下一個(gè)</a>
</div>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：