diff options
Diffstat (limited to 'src/main/webapp/jquery-ui-1.9pre/tests/visual/position')
6 files changed, 621 insertions, 0 deletions
diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position.html new file mode 100644 index 0000000..9d29abe --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position.html @@ -0,0 +1,67 @@ +<!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.1.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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + var inputs = $("input"); + $("ul").insertAfter(inputs); + $(window).resize(function() { + inputs.each(function() { + $(this).position({ + my: this.id.replace(/-/, " "), + at: this.id.replace(/-/, " "), + of: "#container", + collision: "none" + }); + $(this).next().menu().position({ + my: "left top", + at: "left bottom", + of: this + }); + }); + }).resize(); + }); + </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; } + </style> +</head> +<body> + +<div id="container"></div> + +<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" /> + +<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> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_fit.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_fit.html new file mode 100644 index 0000000..78751d3 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_fit.html @@ -0,0 +1,148 @@ +<!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.1.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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + var inputs = $("input"); + $("ul").insertAfter(inputs); + inputs.each(function(index) { + $(this).position({ + my: this.id.replace(/-/, " "), + at: this.id.replace(/-/, " "), + 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 id="left-top" /> +<input id="center-top" /> +<input id="right-top" /> +<input id="left-top" /> +<input id="center-top" /> +<input id="right-top" /> +<input id="left-top" /> +<input id="center-top" /> +<input id="right-top" /> + +<input id="left-top" /> +<input id="center-center" /> +<input id="right-bottom" /> +<input id="left-top" /> +<input id="center-center" /> +<input id="right-bottom" /> +<input id="left-top" /> +<input id="center-center" /> +<input id="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> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_flip.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_flip.html new file mode 100644 index 0000000..7b26f6a --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_flip.html @@ -0,0 +1,77 @@ +<!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.1.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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + var inputs = $("input"); + $("ul").insertAfter(inputs); + inputs.each(function(index) { + $(this).position({ + my: this.id.replace(/-/, " "), + at: this.id.replace(/-/, " "), + 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 id="left-top" /> +<input id="center-top" /> +<input id="right-top" /> +<input id="left-center" /> +<input id="center-center" /> +<input id="right-center" /> +<input id="left-bottom" /> +<input id="center-center" /> +<input id="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> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_flipfit.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_flipfit.html new file mode 100644 index 0000000..b5cf829 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_flipfit.html @@ -0,0 +1,86 @@ +<!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.1.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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + var inputs = $("input"); + $("ul").insertAfter(inputs); + inputs.each(function(index) { + $(this).position({ + my: this.id.replace(/-/, " "), + at: this.id.replace(/-/, " "), + 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 id="left-top" /> +<input id="center-top" /> +<input id="right-top" /> +<input id="left-top" /> +<input id="center-top" /> +<input id="right-top" /> +<input id="left-center" /> +<input id="center-center" /> +<input id="right-center" /> +<input id="left-bottom" /> +<input id="center-center" /> +<input id="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> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_margin.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_margin.html new file mode 100644 index 0000000..52b8008 --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_margin.html @@ -0,0 +1,43 @@ +<!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.1.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="http://jqueryui.com/themeroller/themeswitchertool/"></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> diff --git a/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_within.html b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_within.html new file mode 100644 index 0000000..156c82e --- /dev/null +++ b/src/main/webapp/jquery-ui-1.9pre/tests/visual/position/position_within.html @@ -0,0 +1,200 @@ +<!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.1.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" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto"); + + $( ".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> |