|
0
|
1 <!DOCTYPE html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta charset="utf-8">
|
|
|
5 <title>jQuery UI Position - Default functionality</title>
|
|
|
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
|
|
7 <script src="../../jquery-1.5.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.mouse.js"></script>
|
|
|
11 <script src="../../ui/jquery.ui.draggable.js"></script>
|
|
|
12 <script src="../../ui/jquery.ui.position.js"></script>
|
|
|
13 <link rel="stylesheet" href="../demos.css">
|
|
|
14 <style>
|
|
|
15 div#parent {
|
|
|
16 width: 60%;
|
|
|
17 margin: 10px auto;
|
|
|
18 padding: 5px;
|
|
|
19 border: 1px solid #777;
|
|
|
20 background-color: #fbca93;
|
|
|
21 text-align: center;
|
|
|
22 }
|
|
|
23 div.positionable {
|
|
|
24 width: 75px;
|
|
|
25 height: 75px;
|
|
|
26 position: absolute;
|
|
|
27 display: block;
|
|
|
28 right: 0;
|
|
|
29 bottom: 0;
|
|
|
30 background-color: #bcd5e6;
|
|
|
31 text-align: center;
|
|
|
32 }
|
|
|
33 select, input {
|
|
|
34 margin-left: 15px;
|
|
|
35 }
|
|
|
36 </style>
|
|
|
37 <script>
|
|
|
38 $(function() {
|
|
|
39 function position( using ) {
|
|
|
40 $( ".positionable" ).position({
|
|
|
41 of: $( "#parent" ),
|
|
|
42 my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
|
|
|
43 at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
|
|
|
44 offset: $( "#offset" ).val(),
|
|
|
45 using: using,
|
|
|
46 collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
|
|
|
47 });
|
|
|
48 }
|
|
|
49
|
|
|
50 $( ".positionable" ).css( "opacity", 0.5 );
|
|
|
51
|
|
|
52 $( ":input" ).bind( "click keyup change", function() { position(); });
|
|
|
53
|
|
|
54 $( "#parent" ).draggable({
|
|
|
55 drag: function() { position(); }
|
|
|
56 });
|
|
|
57
|
|
|
58 $( ".positionable" ).draggable({
|
|
|
59 drag: function( event, ui ) {
|
|
|
60 // reset offset before calculating it
|
|
|
61 $( "#offset" ).val( "0" );
|
|
|
62 position(function( result ) {
|
|
|
63 $( "#offset" ).val( "" + ( ui.offset.left - result.left ) +
|
|
|
64 " " + ( ui.offset.top - result.top ) );
|
|
|
65 position();
|
|
|
66 });
|
|
|
67 }
|
|
|
68 });
|
|
|
69
|
|
|
70 position();
|
|
|
71 });
|
|
|
72 </script>
|
|
|
73 </head>
|
|
|
74 <body>
|
|
|
75
|
|
|
76 <div class="demo">
|
|
|
77
|
|
|
78 <div id="parent">
|
|
|
79 <p>
|
|
|
80 This is the position parent element.
|
|
|
81 </p>
|
|
|
82 </div>
|
|
|
83
|
|
|
84 <div class="positionable">
|
|
|
85 <p>
|
|
|
86 to position
|
|
|
87 </p>
|
|
|
88 </div>
|
|
|
89
|
|
|
90 <div class="positionable" style="width:120px; height: 40px;">
|
|
|
91 <p>
|
|
|
92 to position 2
|
|
|
93 </p>
|
|
|
94 </div>
|
|
|
95
|
|
|
96 <div style="padding: 20px; margin-top: 75px;">
|
|
|
97 position...
|
|
|
98 <div style="padding-bottom: 20px;">
|
|
|
99 <b>my:</b>
|
|
|
100 <select id="my_horizontal">
|
|
|
101 <option value="left">left</option>
|
|
|
102 <option value="center">center</option>
|
|
|
103 <option value="right">right</option>
|
|
|
104 </select>
|
|
|
105 <select id="my_vertical">
|
|
|
106 <option value="top">top</option>
|
|
|
107 <option value="middle">center</option>
|
|
|
108 <option value="bottom">bottom</option>
|
|
|
109 </select>
|
|
|
110 </div>
|
|
|
111 <div style="padding-bottom: 20px;">
|
|
|
112 <b>at:</b>
|
|
|
113 <select id="at_horizontal">
|
|
|
114 <option value="left">left</option>
|
|
|
115 <option value="center">center</option>
|
|
|
116 <option value="right">right</option>
|
|
|
117 </select>
|
|
|
118 <select id="at_vertical">
|
|
|
119 <option value="top">top</option>
|
|
|
120 <option value="middle">center</option>
|
|
|
121 <option value="bottom">bottom</option>
|
|
|
122 </select>
|
|
|
123 </div>
|
|
|
124 <div style="padding-bottom: 20px;">
|
|
|
125 <b>offset:</b>
|
|
|
126 <input id="offset" type="text" size="15"/>
|
|
|
127 </div>
|
|
|
128 <div style="padding-bottom: 20px;">
|
|
|
129 <b>collision:</b>
|
|
|
130 <select id="collision_horizontal">
|
|
|
131 <option value="flip">flip</option>
|
|
|
132 <option value="fit">fit</option>
|
|
|
133 <option value="none">none</option>
|
|
|
134 </select>
|
|
|
135 <select id="collision_vertical">
|
|
|
136 <option value="flip">flip</option>
|
|
|
137 <option value="fit">fit</option>
|
|
|
138 <option value="none">none</option>
|
|
|
139 </select>
|
|
|
140 </div>
|
|
|
141 </div>
|
|
|
142
|
|
|
143 </div><!-- End demo -->
|
|
|
144
|
|
|
145
|
|
|
146
|
|
|
147 <div class="demo-description">
|
|
|
148 <p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
|
|
|
149 <br/>Drag around the parent element to see collision detection in action.</p>
|
|
|
150 </div><!-- End demo-description -->
|
|
|
151
|
|
|
152 </body>
|
|
|
153 </html>
|
