diff options
Diffstat (limited to 'tests/visual/position/position.html')
| -rw-r--r-- | tests/visual/position/position.html | 266 |
1 files changed, 188 insertions, 78 deletions
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 64c5d2300..678412475 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -1,91 +1,201 @@ -<!DOCTYPE html> +<!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" 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> + <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> - 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: "↑"; - position: absolute; - top: -22px; - left: 5px; + 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; } - .right:before { - left: auto; - right: 5px; + .ui-flipped-left { + border-left: 3px solid #000000; } - .bottom:before { - content: "↓"; - top: auto; - bottom: -19px; + .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> - -<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> +<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> + + <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> |