mirror of
https://github.com/tuxis-ie/nsedit.git
synced 2025-05-24 00:24:07 +03:00
Merge commit 'd21ea7816e' as 'jquery-ui'
This commit is contained in:
Mark Schouten
commit
e904a80717
629 changed files with 341074 additions and 0 deletions
143
jquery-ui/tests/visual/position/position.html
Normal file
143
jquery-ui/tests/visual/position/position.html
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test</title>
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/mouse.js"></script>
|
||||
<script src="../../../ui/draggable.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<style>
|
||||
.demo {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
background: #eee;
|
||||
}
|
||||
#target {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #777;
|
||||
background-color: #fbca93;
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
.positionable {
|
||||
position: absolute;
|
||||
background-color: #bcd5e6;
|
||||
text-align: center;
|
||||
}
|
||||
.extra-margin {
|
||||
margin: 0 15px 15px 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var within = $( ".demo" ),
|
||||
positionable = $( ".positionable" );
|
||||
function position() {
|
||||
positionable.position({
|
||||
of: $( "#target" ),
|
||||
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
|
||||
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
|
||||
within: within,
|
||||
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
|
||||
});
|
||||
}
|
||||
|
||||
positionable.css( "opacity", 0.5 );
|
||||
|
||||
$( "#target" ).draggable({
|
||||
drag: function() { position(); }
|
||||
});
|
||||
|
||||
$( "#within" ).click(function() {
|
||||
within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
|
||||
position();
|
||||
});
|
||||
|
||||
$( "#margin" ).click(function() {
|
||||
positionable.toggleClass( "extra-margin" );
|
||||
position();
|
||||
});
|
||||
|
||||
$( "select, input" ).bind( "click keyup change", function() { position(); } );
|
||||
|
||||
position();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<div id="target">
|
||||
<p>This is the position target element.</p>
|
||||
</div>
|
||||
|
||||
<div class="positionable" style="width: 75px; height: 75px;">
|
||||
<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:</h2>
|
||||
<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="flipfit">flipfit</option>
|
||||
<option value="none">none</option>
|
||||
</select>
|
||||
<select id="collision_vertical">
|
||||
<option value="flip">flip</option>
|
||||
<option value="fit">fit</option>
|
||||
<option value="flipfit">flipfit</option>
|
||||
<option value="none">none</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="within">within:</label>
|
||||
<input id="within" type="checkbox" checked="checked">
|
||||
</div>
|
||||
<div>
|
||||
<label for="margin">extra margin:</label>
|
||||
<input id="margin" type="checkbox">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
145
jquery-ui/tests/visual/position/position_feedback.html
Normal file
145
jquery-ui/tests/visual/position/position_feedback.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Position Visual Test: Feedback</title>
|
||||
<link rel="stylesheet" href="../../../themes/base/all.css">
|
||||
<script src="../../../external/jquery/jquery.js"></script>
|
||||
<script src="../../../ui/core.js"></script>
|
||||
<script src="../../../ui/widget.js"></script>
|
||||
<script src="../../../ui/position.js"></script>
|
||||
<script src="../../../ui/menu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
function using( position, feedback ) {
|
||||
$( this )
|
||||
.css( position )
|
||||
.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
|
||||
.removeClass( "left right top bottom center middle vertical horizontal" )
|
||||
.addClass( feedback.horizontal )
|
||||
.addClass( feedback.vertical )
|
||||
.addClass( feedback.important );
|
||||
}
|
||||
|
||||
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 );
|
||||
function positionWithOffset( horizontal, vertical ) {
|
||||
return {
|
||||
my: "left top",
|
||||
at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
|
||||
"top" + (vertical < 0 ? vertical : "+" + vertical),
|
||||
of: target,
|
||||
using: using
|
||||
};
|
||||
};
|
||||
$( document ).bind( "mousemove", function( event ) {
|
||||
element.position( positionWithOffset(
|
||||
event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
|
||||
oppositeElement.position( positionWithOffset(
|
||||
-1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
|
||||
leftElement.position( positionWithOffset(
|
||||
-0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
|
||||
rightElement.position( positionWithOffset(
|
||||
0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#target, .element {
|
||||
position: absolute;
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
width: 75px;
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
#target {
|
||||
height: 75px;
|
||||
}
|
||||
.element:before {
|
||||
font-size: 12pt;
|
||||
content: "↑";
|
||||
position: absolute;
|
||||
top: -19px;
|
||||
left: 5px;
|
||||
}
|
||||
.right:before {
|
||||
left: auto;
|
||||
right: 5px;
|
||||
}
|
||||
.bottom:before {
|
||||
content: "↓";
|
||||
top: auto;
|
||||
bottom: -19px;
|
||||
}
|
||||
.center:before {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
}
|
||||
.middle:before {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
}
|
||||
.horizontal:before {
|
||||
height: 10px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
bottom: auto;
|
||||
left: -18px;
|
||||
right: auto;
|
||||
content: "←";
|
||||
}
|
||||
.right.horizontal:before {
|
||||
left: auto;
|
||||
right: -18px;
|
||||
content: "→";
|
||||
}
|
||||
.bottom.horizontal:before {
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
}
|
||||
.top.horizontal:before {
|
||||
top: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="target">all around me</div>
|
||||
<div class="element"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue