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

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Position Visual Test</title>
   6         <script src="../../../jquery-1.9.1.js"></script>
   7         <script src="../../../ui/jquery.ui.core.js"></script>
   8         <script src="../../../ui/jquery.ui.widget.js"></script>
   9         <script src="../../../ui/jquery.ui.mouse.js"></script>
  10         <script src="../../../ui/jquery.ui.draggable.js"></script>
  11         <script src="../../../ui/jquery.ui.position.js"></script>
  12         <style>
  13                 .demo {
  14                         position: relative;
  15                         height: 500px;
  16                         width: 80%;
  17                         margin: 20px auto;
  18                         background: #eee;
  19                 }
  20                 #target {
  21                         width: 60%;
  22                         margin: 0 auto;
  23                         border: 1px solid #777;
  24                         background-color: #fbca93;
  25                         text-align: center;
  26                         cursor: move;
  27                 }
  28                 .positionable {
  29                         position: absolute;
  30                         background-color: #bcd5e6;
  31                         text-align: center;
  32                 }
  33                 .extra-margin {
  34                         margin: 0 15px 15px 0;
  35                 }
  36         </style>
  37         <script>
  38                 $(function() {
  39                         var within = $( ".demo" ),
  40                                 positionable = $( ".positionable" );
  41                         function position() {
  42                                 positionable.position({
  43                                         of: $( "#target" ),
  44                                         my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
  45                                         at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
  46                                         within: within,
  47                                         collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
  48                                 });
  49                         }
  50
  51                         positionable.css( "opacity", 0.5 );
  52
  53                         $( "#target" ).draggable({
  54                                 drag: function() { position(); }
  55                         });
  56
  57                         $( "#within" ).click(function() {
  58                                 within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
  59                                 position();
  60                         });
  61
  62                         $( "#margin" ).click(function() {
  63                                 positionable.toggleClass( "extra-margin" );
  64                                 position();
  65                         });
  66
  67                         $( "select, input" ).bind( "click keyup change", function() { position(); } );
  68
  69                         position();
  70                 });
  71         </script>
  72 </head>
  73 <body>
  74
  75 <div class="demo">
  76         <div id="target">
  77                 <p>This is the position target element.</p>
  78         </div>
  79
  80         <div class="positionable" style="width: 75px; height: 75px;">
  81                 <p>to position</p>
  82         </div>
  83
  84         <div class="positionable" style="width:120px; height: 40px;">
  85                 <p>to position 2</p>
  86         </div>
  87
  88         <form style="padding: 20px; margin-top: 75px;">
  89                 <h2>Position configuration:</h2>
  90                 <div style="padding-bottom: 20px;">
  91                         <b>my:</b>
  92                         <select id="my_horizontal">
  93                                 <option value="left">left</option>
  94                                 <option value="center">center</option>
  95                                 <option value="right" selected="selected">right</option>
  96                         </select>
  97                         <select id="my_vertical">
  98                                 <option value="top">top</option>
  99                                 <option value="middle">center</option>
 100                                 <option value="bottom">bottom</option>
 101                         </select>
 102                 </div>
 103                 <div style="padding-bottom: 20px;">
 104                         <b>at:</b>
 105                         <select id="at_horizontal">
 106                                 <option value="left">left</option>
 107                                 <option value="center">center</option>
 108                                 <option value="right" selected="selected">right</option>
 109                         </select>
 110                         <select id="at_vertical">
 111                                 <option value="top">top</option>
 112                                 <option value="middle">center</option>
 113                                 <option value="bottom">bottom</option>
 114                         </select>
 115                 </div>
 116                 <div style="padding-bottom: 20px;">
 117                         <b>collision:</b>
 118                         <select id="collision_horizontal">
 119                                 <option value="flip">flip</option>
 120                                 <option value="fit">fit</option>
 121                                 <option value="flipfit">flipfit</option>
 122                                 <option value="none">none</option>
 123                         </select>
 124                         <select id="collision_vertical">
 125                                 <option value="flip">flip</option>
 126                                 <option value="fit">fit</option>
 127                                 <option value="flipfit">flipfit</option>
 128                                 <option value="none">none</option>
 129                         </select>
 130                 </div>
 131                 <div>
 132                         <label for="within">within:</label>
 133                         <input id="within" type="checkbox" checked="checked">
 134                 </div>
 135                 <div>
 136                         <label for="margin">extra margin:</label>
 137                         <input id="margin" type="checkbox">
 138                 </div>
 139         </form>
 140 </div>
 141
 142 </body>
 143 </html>