Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Position: Cleanup visual tests, keep general and feedback
- Loading branch information
1 parent
c549864
commit ba1776a
Showing
8 changed files
with
188 additions
and
743 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Oops, something went wrong.