git://git.onelab.eu / unfold.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
imported the whole jquery-ui package, refreshed with 1.10.2
[unfold.git] / third-party / jquery-ui-1.10.2 / tests / visual / position / position_feedback.html
diff --git a/third-party/jquery-ui-1.10.2/tests/visual/position/position_feedback.html b/third-party/jquery-ui-1.10.2/tests/visual/position/position_feedback.html
new file mode 100644 (file)
index 0000000..1490f6a
--- /dev/null
+++ b/third-party/jquery-ui-1.10.2/tests/visual/position/position_feedback.html
@@ -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/jquery.ui.all.css">
+       <script src="../../../jquery-1.9.1.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 ) {
+                       $( 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 ).on( "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>
myslice (django)