third-party/jquery-ui-1.10.2/tests/visual/position/position_feedback.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Position Visual Test: Feedback</title>
   6         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   7         <script src="../../../jquery-1.9.1.js"></script>
   8         <script src="../../../ui/jquery.ui.core.js"></script>
   9         <script src="../../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../../ui/jquery.ui.position.js"></script>
  11         <script src="../../../ui/jquery.ui.menu.js"></script>
  12         <script>
  13         $(function() {
  14                 function using( position, feedback ) {
  15                         $( this )
  16                                 .css( position )
  17                                 .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
  18                                 .removeClass( "left right top bottom center middle vertical horizontal" )
  19                                 .addClass( feedback.horizontal )
  20                                 .addClass( feedback.vertical )
  21                                 .addClass( feedback.important );
  22                 }
  23
  24                 var element = $( ".element" ),
  25                         target = $( "#target" ).position({
  26                                 my: "center",
  27                                 at: "center",
  28                                 of: window
  29                         }),
  30                         targetOffset = target.offset(),
  31                         oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
  32                         leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
  33                         rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
  34
  35                 $.each([
  36                         "center top-100",
  37                         "right+25 top-50",
  38                         "right+75 top",
  39                         "right+75 center",
  40                         "right+75 bottom",
  41                         "right+25 bottom+50",
  42                         "center bottom+100",
  43                         "left-25 bottom+50",
  44                         "left-75 bottom",
  45                         "left-75 center",
  46                         "left-75 top",
  47                         "left-25 top-50"
  48                 ], function( index, direction ) {
  49                         element.clone().insertAfter( target ).position({
  50                                 my: "center",
  51                                 at: direction,
  52                                 of: target,
  53                                 using: using
  54                         });
  55                 });
  56
  57                 element.width( 150 );
  58                 function positionWithOffset( horizontal, vertical ) {
  59                         return {
  60                                 my: "left top",
  61                                 at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
  62                                         "top" + (vertical < 0 ? vertical : "+" + vertical),
  63                                 of: target,
  64                                 using: using
  65                         };
  66                 };
  67                 $( document ).on( "mousemove", function( event ) {
  68                         element.position( positionWithOffset(
  69                                 event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
  70                         oppositeElement.position( positionWithOffset(
  71                                 -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
  72                         leftElement.position( positionWithOffset(
  73                                 -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
  74                         rightElement.position( positionWithOffset(
  75                                 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
  76                 });
  77         });
  78         </script>
  79         <style>
  80         #target, .element {
  81                 position: absolute;
  82                 border: 1px solid black;
  83                 border-radius: 5px;
  84                 width: 75px;
  85                 height: 25px;
  86                 padding: 5px;
  87                 font-size: 62.5%;
  88         }
  89         #target {
  90                 height: 75px;
  91         }
  92         .element:before {
  93                 font-size: 12pt;
  94                 content: "↑";
  95                 position: absolute;
  96                 top: -19px;
  97                 left: 5px;
  98         }
  99         .right:before {
 100                 left: auto;
 101                 right: 5px;
 102         }
 103         .bottom:before {
 104                 content: "↓";
 105                 top: auto;
 106                 bottom: -19px;
 107         }
 108         .center:before {
 109                 left: 50%;
 110                 right: auto;
 111         }
 112         .middle:before {
 113                 top: 50%;
 114                 bottom: auto;
 115         }
 116         .horizontal:before {
 117                 height: 10px;
 118                 top: 50%;
 119                 margin-top: -8px;
 120                 bottom: auto;
 121                 left: -18px;
 122                 right: auto;
 123                 content: "←";
 124         }
 125         .right.horizontal:before {
 126                 left: auto;
 127                 right: -18px;
 128                 content: "→";
 129         }
 130         .bottom.horizontal:before {
 131                 top: auto;
 132                 bottom: 5px;
 133         }
 134         .top.horizontal:before {
 135                 top: 5px;
 136         }
 137         </style>
 138 </head>
 139 <body>
 140
 141 <div id="target">all around me</div>
 142 <div class="element"></div>
 143
 144 </body>
 145 </html>