|
|
@@ -12,126 +12,68 @@ |
|
|
<script src="../../ui/jquery.ui.position.js"></script> |
|
|
<link rel="stylesheet" href="../demos.css"> |
|
|
<style> |
|
|
#parent { |
|
|
width: 60%; |
|
|
height: 40px; |
|
|
margin: 10px auto; |
|
|
padding: 5px; |
|
|
border: 1px solid #777; |
|
|
background-color: #fbca93; |
|
|
text-align: center; |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
.positionable { |
|
|
position: absolute; |
|
|
display: block; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #bcd5e6; |
|
|
text-align: center; |
|
|
body > div[style*='display'] { |
|
|
/* Workaround */ |
|
|
/* position: absolute; */ |
|
|
} |
|
|
#positionable1 { |
|
|
width: 75px; |
|
|
height: 75px; |
|
|
.blue { |
|
|
background: blue; |
|
|
float: left; |
|
|
width: 100px; |
|
|
} |
|
|
#positionable2 { |
|
|
width: 120px; |
|
|
height: 40px; |
|
|
.red { |
|
|
background: red; |
|
|
float: left; |
|
|
overflow-y: hidden; |
|
|
} |
|
|
select, input { |
|
|
margin-left: 15px; |
|
|
.content { |
|
|
width: 2000px; |
|
|
height: 400px; |
|
|
border: 2px solid white; |
|
|
} |
|
|
#uiPosition { |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
background: #ccc; |
|
|
} |
|
|
|
|
|
</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 |
|
|
$( "#redBlock" ).css({ |
|
|
width: $( window ).width() - $( "#blueBlock" ).width() |
|
|
}); |
|
|
$( ".block" ).css({ |
|
|
height: $( window ).height() |
|
|
}); |
|
|
|
|
|
position(); |
|
|
$( "button" ).on('click', function (e) { |
|
|
$( "#uiPosition" ) |
|
|
.position({ |
|
|
my: "left top", |
|
|
at: "left bottom", |
|
|
of: e.target, |
|
|
within: $( "#redBlock" ), |
|
|
collision: "flip" |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="parent"> |
|
|
<p> |
|
|
This is the position parent element. |
|
|
</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;"> |
|
|
position... |
|
|
<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 class="block blue" id="blueBlock"></div> |
|
|
<div class="block red" id="redBlock"> |
|
|
<div class="content"> |
|
|
<button>Position</button> |
|
|
</div> |
|
|
</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> |
|
|
|
|
|
<div class="demo-description"> |
|
|
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. |
|
|
<br>Drag around the parent element to see collision detection in action.</p> |
|
|
</div> |
|
|
<div id="uiPosition"></div> |
|
|
|
|
|
</body> |
|
|
</html> |
