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>
|
||||
<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_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>
|
||||
|
||||
<h2>Tooltip</h2>
|
||||
|
||||
@ -1,91 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Position Visual Test: Default</title>
|
||||
<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 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);
|
||||
$(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>
|
||||
|
||||
<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>
|
||||
input, .ui-menu { position: absolute; }
|
||||
.ui-menu { width: 200px; }
|
||||
html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
|
||||
#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
|
||||
.ui-menu:before {
|
||||
font-size: 12pt;
|
||||
content: "↑";
|
||||
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;
|
||||
top: -22px;
|
||||
left: 5px;
|
||||
display: block;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #bcd5e6;
|
||||
text-align: center;
|
||||
cursor:move;
|
||||
}
|
||||
.right:before {
|
||||
left: auto;
|
||||
right: 5px;
|
||||
.ui-flipped-top {
|
||||
border-top: 3px solid #000000;
|
||||
}
|
||||
.bottom:before {
|
||||
content: "↓";
|
||||
top: auto;
|
||||
bottom: -19px;
|
||||
.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;
|
||||
}
|
||||
.extra-margin {
|
||||
margin: 0 15px 15px 0;
|
||||
}
|
||||
</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>
|
||||
<body>
|
||||
|
||||
<div id="container"></div>
|
||||
<div class="demo-container">
|
||||
<div class="demo">
|
||||
|
||||
<input id="left-top" />
|
||||
<input id="left-center" />
|
||||
<input id="left-bottom" />
|
||||
<input id="center-top" />
|
||||
<input id="center-center" />
|
||||
<input id="center-bottom" />
|
||||
<input id="right-top" />
|
||||
<input id="right-center" />
|
||||
<input id="right-bottom" />
|
||||
<div id="parent">
|
||||
<p>This is the position parent element.</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="positionable">
|
||||
<p>to position</p>
|
||||
</div>
|
||||
|
||||
<div class="positionable" style="width:120px; height: 40px;">
|
||||
<p>to position 2</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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