mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Position: Cleanup visual tests, keep general and feedback
This commit is contained in:
Jörn Zaefferer
parent
c549864572
commit
ba1776a513
@ -51,12 +51,6 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li><a href="position/position.html">General</a></li>
|
<li><a href="position/position.html">General</a></li>
|
||||||
<li><a href="position/position_feedback.html">Feedback</a></li>
|
<li><a href="position/position_feedback.html">Feedback</a></li>
|
||||||
<li><a href="position/position_feedback_rotate.html">Feedback (rotate)</a></li>
|
|
||||||
<li><a href="position/position_fit.html">Collision - fit</a></li>
|
|
||||||
<li><a href="position/position_flip.html">Collision - flip</a></li>
|
|
||||||
<li><a href="position/position_flipfit.html">Collision - flipfit</a></li>
|
|
||||||
<li><a href="position/position_margin.html">Margins</a></li>
|
|
||||||
<li><a href="position/position_within.html">Within</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Tooltip</h2>
|
<h2>Tooltip</h2>
|
||||||
|
|||||||
@ -1,91 +1,201 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="utf-8">
|
||||||
<title>Position Visual Test: Default</title>
|
<title>Position Visual Test: Containing Element</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
||||||
<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
<script src="../../../jquery-1.7.2.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
<script src="../../../ui/jquery.ui.core.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
<script src="../../../ui/jquery.ui.widget.js"></script>
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
<script src="../../../ui/jquery.ui.mouse.js"></script>
|
||||||
<script type="text/javascript">
|
<script src="../../../ui/jquery.ui.draggable.js"></script>
|
||||||
$(function() {
|
<script src="../../../ui/jquery.ui.position.js"></script>
|
||||||
var inputs = $("input");
|
|
||||||
$("ul").insertAfter(inputs);
|
|
||||||
$(window).resize(function() {
|
|
||||||
inputs.each(function() {
|
|
||||||
var input = $(this).position({
|
|
||||||
my: this.id.replace(/-/, " "),
|
|
||||||
at: this.id.replace(/-/, " "),
|
|
||||||
of: "#container",
|
|
||||||
collision: "none"
|
|
||||||
});
|
|
||||||
var menu = $(this).next().menu()
|
|
||||||
menu.position({
|
|
||||||
my: "left+30 top+20",
|
|
||||||
at: "left bottom",
|
|
||||||
of: this,
|
|
||||||
using: function( position, feedback ) {
|
|
||||||
input.val(feedback.horizontal + " " + feedback.vertical)
|
|
||||||
$(this).offset( position );
|
|
||||||
$(this)
|
|
||||||
.removeClass("left right top bottom center middle")
|
|
||||||
.addClass(feedback.horizontal)
|
|
||||||
.addClass(feedback.vertical);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}).resize();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
<style>
|
||||||
input, .ui-menu { position: absolute; }
|
html, body {
|
||||||
.ui-menu { width: 200px; }
|
height:100%;
|
||||||
html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
|
width:100%;
|
||||||
#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
|
margin:0;
|
||||||
.ui-menu:before {
|
/* force scroll bar*/
|
||||||
font-size: 12pt;
|
min-height:800px;
|
||||||
content: "↑";
|
min-width:800px;
|
||||||
|
|
||||||
|
/* IE6 needs this */
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.demo-description {
|
||||||
|
text-align:center;
|
||||||
|
padding:1.5em;
|
||||||
|
}
|
||||||
|
.demo-container {
|
||||||
|
background:#aaa;
|
||||||
|
width:80%;
|
||||||
|
height:80%;
|
||||||
|
|
||||||
|
text-align:left;
|
||||||
|
margin:0 auto;
|
||||||
|
position:relative;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
.demo {
|
||||||
|
background:#eee;
|
||||||
|
overflow:hidden;
|
||||||
|
position:relative;
|
||||||
|
height:100%;
|
||||||
|
/* IE6 needs this */
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
#parent {
|
||||||
|
width: 60%;
|
||||||
|
margin: 10px auto;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid #777;
|
||||||
|
background-color: #fbca93;
|
||||||
|
text-align: center;
|
||||||
|
cursor:move;
|
||||||
|
}
|
||||||
|
.positionable {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -22px;
|
display: block;
|
||||||
left: 5px;
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #bcd5e6;
|
||||||
|
text-align: center;
|
||||||
|
cursor:move;
|
||||||
}
|
}
|
||||||
.right:before {
|
.ui-flipped-top {
|
||||||
left: auto;
|
border-top: 3px solid #000000;
|
||||||
right: 5px;
|
|
||||||
}
|
}
|
||||||
.bottom:before {
|
.ui-flipped-bottom {
|
||||||
content: "↓";
|
border-bottom: 3px solid #000000;
|
||||||
top: auto;
|
}
|
||||||
bottom: -19px;
|
.ui-flipped-left {
|
||||||
|
border-left: 3px solid #000000;
|
||||||
|
}
|
||||||
|
.ui-flipped-right {
|
||||||
|
border-right: 3px solid #000000;
|
||||||
|
}
|
||||||
|
select, input {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
.extra-margin {
|
||||||
|
margin: 0 15px 15px 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
$(function() {
|
||||||
|
var within = $( ".demo" ),
|
||||||
|
positionable = $( ".positionable" );
|
||||||
|
function position() {
|
||||||
|
positionable.position({
|
||||||
|
of: $( "#parent" ),
|
||||||
|
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
|
||||||
|
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
|
||||||
|
offset: $( "#offset" ).val(),
|
||||||
|
within: within,
|
||||||
|
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$( ".demo" ).css("overflow","scroll");
|
||||||
|
|
||||||
|
positionable.css( "opacity", 0.5 );
|
||||||
|
|
||||||
|
|
||||||
|
$( "#parent" ).draggable({
|
||||||
|
drag: function() { position(); }
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#within").click(function() {
|
||||||
|
within = within.is(".demo") ? $(window) : $(".demo");
|
||||||
|
position();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#margin").click(function() {
|
||||||
|
positionable.toggleClass( "extra-margin" );
|
||||||
|
position();
|
||||||
|
});
|
||||||
|
|
||||||
|
$( ":input" ).bind( "click keyup change", function() { position(); } );
|
||||||
|
|
||||||
|
position();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="container"></div>
|
<div class="demo-container">
|
||||||
|
<div class="demo">
|
||||||
|
|
||||||
<input id="left-top" />
|
<div id="parent">
|
||||||
<input id="left-center" />
|
<p>This is the position parent element.</p>
|
||||||
<input id="left-bottom" />
|
</div>
|
||||||
<input id="center-top" />
|
|
||||||
<input id="center-center" />
|
|
||||||
<input id="center-bottom" />
|
|
||||||
<input id="right-top" />
|
|
||||||
<input id="right-center" />
|
|
||||||
<input id="right-bottom" />
|
|
||||||
|
|
||||||
<ul>
|
<div class="positionable">
|
||||||
<li><a href="#">Java</a></li>
|
<p>to position</p>
|
||||||
<li><a href="#">JavaScript</a></li>
|
</div>
|
||||||
<li><a href="#">Perl</a></li>
|
|
||||||
<li><a href="#">Ruby</a></li>
|
<div class="positionable" style="width:120px; height: 40px;">
|
||||||
<li><a href="#">C++</a></li>
|
<p>to position 2</p>
|
||||||
<li><a href="#">Python</a></li>
|
</div>
|
||||||
<li><a href="#">C#</a></li>
|
|
||||||
</ul>
|
<form style="padding: 20px; margin-top: 75px;">
|
||||||
|
<h2>Position configuration:
|
||||||
|
<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" selected="selected">right</option>
|
||||||
|
</select>
|
||||||
|
<select id="my_vertical">
|
||||||
|
<option value="top">top</option>
|
||||||
|
<option value="middle">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" selected="selected">right</option>
|
||||||
|
</select>
|
||||||
|
<select id="at_vertical">
|
||||||
|
<option value="top">top</option>
|
||||||
|
<option value="middle">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="none">none</option>
|
||||||
|
</select>
|
||||||
|
<select id="collision_vertical">
|
||||||
|
<option value="flip">flip</option>
|
||||||
|
<option value="fit">fit</option>
|
||||||
|
<option value="none">none</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="within">within:</label>
|
||||||
|
<input id="within" type="checkbox" checked />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="margin">extra margin:</label>
|
||||||
|
<input id="margin" type="checkbox" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div><!-- End demo -->
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,109 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Position Visual Test: Default</title>
|
|
||||||
<link rel="stylesheet" href="../visual.css">
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
|
|
||||||
<script src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.menu.js"></script>
|
|
||||||
<script>
|
|
||||||
$(function() {
|
|
||||||
function using( position, feedback ) {
|
|
||||||
var angleRad = Math.atan2(
|
|
||||||
feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2,
|
|
||||||
feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2
|
|
||||||
) * 180 / Math.PI,
|
|
||||||
angle = Math.round( angleRad * 100) / 100;
|
|
||||||
$( this )
|
|
||||||
.css( position )
|
|
||||||
.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" )
|
|
||||||
.css({
|
|
||||||
"-webkit-transform": "rotate(" + angle + "deg)",
|
|
||||||
"-moz-transform": "rotate(" + angle + "deg)",
|
|
||||||
"-ms-transform": "rotate(" + angle + "deg)",
|
|
||||||
"-o-transform": "rotate(" + angle + "deg)",
|
|
||||||
"transform": "rotate(" + angle + "deg)"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var element = $( ".element" ),
|
|
||||||
target = $( "#target" ).position({
|
|
||||||
my: "center",
|
|
||||||
at: "center",
|
|
||||||
of: window
|
|
||||||
}),
|
|
||||||
targetOffset = target.offset();
|
|
||||||
oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
|
|
||||||
leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
|
|
||||||
rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
|
|
||||||
|
|
||||||
$.each([
|
|
||||||
"center top-100",
|
|
||||||
"right+25 top-50",
|
|
||||||
"right+75 top",
|
|
||||||
"right+75 center",
|
|
||||||
"right+75 bottom",
|
|
||||||
"right+25 bottom+50",
|
|
||||||
"center bottom+100",
|
|
||||||
"left-25 bottom+50",
|
|
||||||
"left-75 bottom",
|
|
||||||
"left-75 center",
|
|
||||||
"left-75 top",
|
|
||||||
"left-25 top-50"
|
|
||||||
], function( index, direction ) {
|
|
||||||
element.clone().insertAfter( target ).position({
|
|
||||||
my: "center",
|
|
||||||
at: direction,
|
|
||||||
of: target,
|
|
||||||
using: using
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
element.width( 150 );
|
|
||||||
$( document ).on( "mousemove", function( event ) {
|
|
||||||
var base = {
|
|
||||||
my: "left top",
|
|
||||||
at: "left top",
|
|
||||||
of: target,
|
|
||||||
using: using
|
|
||||||
};
|
|
||||||
element.position( $.extend({
|
|
||||||
offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
|
|
||||||
}, base ));
|
|
||||||
oppositeElement.position( $.extend({
|
|
||||||
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
|
|
||||||
}, base ));
|
|
||||||
leftElement.position( $.extend({
|
|
||||||
offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
|
|
||||||
}, base ));
|
|
||||||
rightElement.position( $.extend({
|
|
||||||
offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
|
|
||||||
}, base ));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
#target, .element {
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 75px;
|
|
||||||
height: 25px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
#target {
|
|
||||||
height: 75px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="target">all around me</div>
|
|
||||||
<div class="element"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,147 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Position Visual Test: Fit</title>
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
||||||
<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(function() {
|
|
||||||
var inputs = $("input");
|
|
||||||
$("ul").insertAfter(inputs);
|
|
||||||
inputs.each(function(index) {
|
|
||||||
$(this).position({
|
|
||||||
my: $(this).data("position"),
|
|
||||||
at: $(this).data("position"),
|
|
||||||
of: "#container"+index,
|
|
||||||
collision: "none"
|
|
||||||
});
|
|
||||||
if(index < 3) {
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "left top",
|
|
||||||
at: "left bottom",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if(index >= 3 && index < 6) {
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "right top",
|
|
||||||
at: "right bottom",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if(index >= 6 && index < 9) {
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "center top",
|
|
||||||
at: "center bottom",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if(index >= 9 && index < 12) {
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "left top",
|
|
||||||
at: "left bottom",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if(index >= 12 && index < 15) {
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "center center",
|
|
||||||
at: "center center",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if(index >= 15) {
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "left bottom",
|
|
||||||
at: "left top",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
input, .ui-menu { position: absolute; }
|
|
||||||
.ui-menu { width: 300px; }
|
|
||||||
#ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; }
|
|
||||||
html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
|
|
||||||
.container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
|
|
||||||
.container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container0" class="container"></div>
|
|
||||||
<div id="container1" class="container"></div>
|
|
||||||
<div id="container2" class="container"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container3" class="container"></div>
|
|
||||||
<div id="container4" class="container"></div>
|
|
||||||
<div id="container5" class="container"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container6" class="container"></div>
|
|
||||||
<div id="container7" class="container"></div>
|
|
||||||
<div id="container8" class="container"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container9" class="container2"></div>
|
|
||||||
<div id="container10" class="container2"></div>
|
|
||||||
<div id="container11" class="container2"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container12" class="container2"></div>
|
|
||||||
<div id="container13" class="container2"></div>
|
|
||||||
<div id="container14" class="container2"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container15" class="container2"></div>
|
|
||||||
<div id="container16" class="container2"></div>
|
|
||||||
<div id="container17" class="container2"></div>
|
|
||||||
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center top" />
|
|
||||||
<input data-position="right top" />
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center top" />
|
|
||||||
<input data-position="right top" />
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center top" />
|
|
||||||
<input data-position="right top" />
|
|
||||||
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right bottom" />
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right bottom" />
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right bottom" />
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Java</a></li>
|
|
||||||
<li><a href="#">JavaScript</a></li>
|
|
||||||
<li><a href="#">Perl</a></li>
|
|
||||||
<li><a href="#">Ruby</a></li>
|
|
||||||
<li><a href="#">C++</a></li>
|
|
||||||
<li><a href="#">Python</a></li>
|
|
||||||
<li><a href="#">C#</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Position Visual Test: Flip</title>
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
||||||
<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(function() {
|
|
||||||
var inputs = $("input");
|
|
||||||
$("ul").insertAfter(inputs);
|
|
||||||
inputs.each(function(index) {
|
|
||||||
$(this).position({
|
|
||||||
my: $(this).data("position"),
|
|
||||||
at: $(this).data("position"),
|
|
||||||
of: "#container"+index,
|
|
||||||
collision: "none"
|
|
||||||
});
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: "left top",
|
|
||||||
at: "left bottom",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
input, .ui-menu { position: absolute; }
|
|
||||||
.ui-menu { width: 300px; }
|
|
||||||
#ui-menu-6, #ui-menu-7, #ui-menu-8 { width: auto; }
|
|
||||||
html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
|
|
||||||
.container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container0" class="container"></div>
|
|
||||||
<div id="container1" class="container"></div>
|
|
||||||
<div id="container2" class="container"></div><br>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container3" class="container" style="width:300px;"></div>
|
|
||||||
<div id="container4" class="container" style="width:300px;"></div>
|
|
||||||
<div id="container5" class="container" style="width:300px;"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container6" class="container" style="height:100px; margin-bottom: 500px;"></div>
|
|
||||||
<div id="container7" class="container" style="height:100px; margin-bottom: 500px;"></div>
|
|
||||||
<div id="container8" class="container" style="height:100px; margin-bottom: 500px;"></div>
|
|
||||||
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center top" />
|
|
||||||
<input data-position="right top" />
|
|
||||||
<input data-position="left center" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right center" />
|
|
||||||
<input data-position="left bottom" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right bottom" />
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Java</a></li>
|
|
||||||
<li><a href="#">JavaScript</a></li>
|
|
||||||
<li><a href="#">Perl</a></li>
|
|
||||||
<li><a href="#">Ruby</a></li>
|
|
||||||
<li><a href="#">C++</a></li>
|
|
||||||
<li><a href="#">Python</a></li>
|
|
||||||
<li><a href="#">C#</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Position Visual Test: FlipFit</title>
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
||||||
<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(function() {
|
|
||||||
var inputs = $("input");
|
|
||||||
$("ul").insertAfter(inputs);
|
|
||||||
inputs.each(function(index) {
|
|
||||||
$(this).position({
|
|
||||||
my: $(this).data("position"),
|
|
||||||
at: $(this).data("position"),
|
|
||||||
of: "#container"+index,
|
|
||||||
collision: "none"
|
|
||||||
});
|
|
||||||
$(this).next().menu().position({
|
|
||||||
my: index > 2 && index < 6 ? "right top" : "left top",
|
|
||||||
at: index > 2 && index < 6 ? "right bottom" : "left bottom",
|
|
||||||
of: this,
|
|
||||||
within: "#container"+index,
|
|
||||||
collision: "flipfit"
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
input, .ui-menu { position: absolute; }
|
|
||||||
.ui-menu { width: 300px; }
|
|
||||||
#ui-menu-3, #ui-menu-4, #ui-menu-5 { width: 185px; }
|
|
||||||
#ui-menu-9, #ui-menu-10, #ui-menu-11 { width: auto; }
|
|
||||||
html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
|
|
||||||
.container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="container0" class="container"></div>
|
|
||||||
<div id="container1" class="container"></div>
|
|
||||||
<div id="container2" class="container"></div><br>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container3" class="container"></div>
|
|
||||||
<div id="container4" class="container"></div>
|
|
||||||
<div id="container5" class="container"></div><br>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container6" class="container" style="width:300px;"></div>
|
|
||||||
<div id="container7" class="container" style="width:300px;"></div>
|
|
||||||
<div id="container8" class="container" style="width:300px;"></div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="container9" class="container" style="height:100px; margin-bottom: 500px;"></div>
|
|
||||||
<div id="container10" class="container" style="height:100px; margin-bottom: 500px;"></div>
|
|
||||||
<div id="container11" class="container" style="height:100px; margin-bottom: 500px;"></div>
|
|
||||||
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center top" />
|
|
||||||
<input data-position="right top" />
|
|
||||||
<input data-position="left top" />
|
|
||||||
<input data-position="center top" />
|
|
||||||
<input data-position="right top" />
|
|
||||||
<input data-position="left center" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right center" />
|
|
||||||
<input data-position="left bottom" />
|
|
||||||
<input data-position="center center" />
|
|
||||||
<input data-position="right bottom" />
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Java</a></li>
|
|
||||||
<li><a href="#">JavaScript</a></li>
|
|
||||||
<li><a href="#">Perl</a></li>
|
|
||||||
<li><a href="#">Ruby</a></li>
|
|
||||||
<li><a href="#">C++</a></li>
|
|
||||||
<li><a href="#">Python</a></li>
|
|
||||||
<li><a href="#">C#</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Position Visual Test: Default</title>
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
||||||
<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(function() {
|
|
||||||
$( "#elem" ).position({
|
|
||||||
my: "right bottom",
|
|
||||||
at: "right bottom",
|
|
||||||
of: window,
|
|
||||||
collision: "fit"
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
#elem {
|
|
||||||
position: absolute;
|
|
||||||
top: 100px;
|
|
||||||
left: 100px;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
box-shadow: 10px 10px 5px #888;
|
|
||||||
-moz-box-shadow: 10px 10px 5px #888;
|
|
||||||
-webkit-box-shadow: 10px 10px 5px #888;
|
|
||||||
background-color: #aaa;
|
|
||||||
margin: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="elem"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,200 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Position Visual Test: Containing Element</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../visual.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
|
|
||||||
|
|
||||||
<script src="../../../jquery-1.7.2.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.core.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.widget.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.mouse.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.draggable.js"></script>
|
|
||||||
<script src="../../../ui/jquery.ui.position.js"></script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html, body {
|
|
||||||
height:100%;
|
|
||||||
width:100%;
|
|
||||||
margin:0;
|
|
||||||
/* force scroll bar*/
|
|
||||||
min-height:800px;
|
|
||||||
min-width:800px;
|
|
||||||
|
|
||||||
/* IE6 needs this */
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
.demo-description {
|
|
||||||
text-align:center;
|
|
||||||
padding:1.5em;
|
|
||||||
}
|
|
||||||
.demo-container {
|
|
||||||
background:#aaa;
|
|
||||||
width:80%;
|
|
||||||
height:80%;
|
|
||||||
|
|
||||||
text-align:left;
|
|
||||||
margin:0 auto;
|
|
||||||
position:relative;
|
|
||||||
padding:10px;
|
|
||||||
}
|
|
||||||
.demo {
|
|
||||||
background:#eee;
|
|
||||||
overflow:hidden;
|
|
||||||
position:relative;
|
|
||||||
height:100%;
|
|
||||||
/* IE6 needs this */
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
#parent {
|
|
||||||
width: 60%;
|
|
||||||
margin: 10px auto;
|
|
||||||
padding: 5px;
|
|
||||||
border: 1px solid #777;
|
|
||||||
background-color: #fbca93;
|
|
||||||
text-align: center;
|
|
||||||
cursor:move;
|
|
||||||
}
|
|
||||||
.positionable {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #bcd5e6;
|
|
||||||
text-align: center;
|
|
||||||
cursor:move;
|
|
||||||
}
|
|
||||||
.ui-flipped-top {
|
|
||||||
border-top: 3px solid #000000;
|
|
||||||
}
|
|
||||||
.ui-flipped-bottom {
|
|
||||||
border-bottom: 3px solid #000000;
|
|
||||||
}
|
|
||||||
.ui-flipped-left {
|
|
||||||
border-left: 3px solid #000000;
|
|
||||||
}
|
|
||||||
.ui-flipped-right {
|
|
||||||
border-right: 3px solid #000000;
|
|
||||||
}
|
|
||||||
select, input {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
$(function() {
|
|
||||||
function position( using ) {
|
|
||||||
$( ".positionable" ).position({
|
|
||||||
of: $( "#parent" ),
|
|
||||||
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
|
|
||||||
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
|
|
||||||
offset: $( "#offset" ).val(),
|
|
||||||
using: using,
|
|
||||||
within: $( ".demo" ),
|
|
||||||
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$( ".demo" ).css("overflow","scroll");
|
|
||||||
|
|
||||||
$( ".positionable" ).css( "opacity", 0.5 );
|
|
||||||
|
|
||||||
$( ":input" ).bind( "click keyup change", function() { position(); } );
|
|
||||||
|
|
||||||
$( "#parent" ).draggable({
|
|
||||||
drag: function() { position(); }
|
|
||||||
});
|
|
||||||
|
|
||||||
$( ".positionable" ).draggable({
|
|
||||||
drag: function( event, ui ) {
|
|
||||||
// reset offset before calculating it
|
|
||||||
$( "#offset" ).val( "0" );
|
|
||||||
position(function( result ) {
|
|
||||||
var demo = $( ".demo" );
|
|
||||||
$( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) +
|
|
||||||
" " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) );
|
|
||||||
position();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
position();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="demo-description">
|
|
||||||
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.
|
|
||||||
</div><!-- End demo-description -->
|
|
||||||
|
|
||||||
<div class="demo-container">
|
|
||||||
<div class="demo">
|
|
||||||
|
|
||||||
<div id="parent">
|
|
||||||
<p>This is the position parent element.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="positionable">
|
|
||||||
<p>to position</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="positionable" style="width:120px; height: 40px;">
|
|
||||||
<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" selected="selected">right</option>
|
|
||||||
</select>
|
|
||||||
<select id="my_vertical">
|
|
||||||
<option value="top">top</option>
|
|
||||||
<option value="middle">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" selected="selected">right</option>
|
|
||||||
</select>
|
|
||||||
<select id="at_vertical">
|
|
||||||
<option value="top">top</option>
|
|
||||||
<option value="middle">center</option>
|
|
||||||
<option value="bottom">bottom</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div style="padding-bottom: 20px;">
|
|
||||||
<b>offset:</b>
|
|
||||||
<input id="offset" type="text" size="15"/>
|
|
||||||
</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="none">none</option>
|
|
||||||
</select>
|
|
||||||
<select id="collision_vertical">
|
|
||||||
<option value="flip">flip</option>
|
|
||||||
<option value="fit">fit</option>
|
|
||||||
<option value="none">none</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div><!-- End demo -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user