/
position.html
executable file
·245 lines (212 loc) · 8.29 KB
/
position.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Arguments</a></li>
</ul>
<div class="UIAPIPlugin">
<h1>jQuery UI Position Utility</h1>
<div id="overview">
<h2 class="top-header">Overview</h2>
<div id="overview-main">
<p>Utility script for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.</p>
<p><em>Note: jQuery UI does not support positioning hidden elements.</em></p>
<p>Does not need ui.core.js or effects.core.js.</p>
</div>
<div id="overview-dependencies">
<h3>Dependencies</h3>
<ul>
<li><i>none (only jQuery core)</i></li>
</ul>
</div>
<div id="overview-example">
<h3>Example</h3>
<div id="overview-example" class="example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="300">
Clicking on the green element transfers to the other.<br />
</p>
<pre>
$("#position1").position({
my: "center",
at: "center",
of: "#targetElement"
});
$("#position2").position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$("#position3").position({
my: "right center",
at: "right bottom",
of: "#targetElement"
});
$(document).mousemove(function(ev){
$("#position4").position({
my: "left bottom",
of: ev,
offset: "3 -3",
collision: "fit"
});
});
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre><!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; }
.positionDiv { width:50px;height:50px;opacity:0.6; }
#position1 {background-color:#F00;}
#position2 {background-color:#0F0;}
#position3 {background-color:#00F;}
#position4 {background-color:#FF0;}
</style>
<script>
$(document).ready(function() {
$("#position1").position({
my: "center",
at: "center",
of: "#targetElement"
});
$("#position2").position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$("#position3").position({
my: "right center",
at: "right bottom",
of: "#targetElement"
});
$(document).mousemove(function(ev){
$("#position4").position({
my: "left bottom",
of: ev,
offset: "3 -3",
collision: "fit"
});
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="targetElement">
<div class="positionDiv" id="position1"></div>
<div class="positionDiv" id="position2"></div>
<div class="positionDiv" id="position3"></div>
<div class="positionDiv" id="position4"></div>
</div>
</body>
</html>
</pre>
<p></div>
</p><p></div>
</div>
</div>
<div id="options">
<h2 class="top-header">Arguments</h2>
<ul class="options-list">
<li class="option" id="option-my">
<div class="option-header">
<h3 class="option-name"><a href="#option-my">my</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">String</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">"center"</dd>
</dl>
</div>
<div class="option-description">
<p>Defines which position on <b>the element being positioned</b> to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"</p>
</div>
</li>
<li class="option" id="option-at">
<div class="option-header">
<h3 class="option-name"><a href="#option-at">at</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">String</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">"center"</dd>
</dl>
</div>
<div class="option-description">
<p>Defines which position on <b>the target element</b> to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"</p>
</div>
</li>
<li class="option" id="option-of">
<div class="option-header">
<h3 class="option-name"><a href="#option-of">of</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Selector, Element, jQuery, Event</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">null</dd>
</dl>
</div>
<div class="option-description">
<p>Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"</p>
</div>
</li>
<li class="option" id="option-offset">
<div class="option-header">
<h3 class="option-name"><a href="#option-offset">offset</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">String</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">null</dd>
</dl>
</div>
<div class="option-description">
<p>Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.</p>
</div>
</li>
<li class="option" id="option-collision">
<div class="option-header">
<h3 class="option-name"><a href="#option-collision">collision</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">String</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">"flip"</dd>
</dl>
</div>
<div class="option-description">
<p>When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none".
</p>
<ul><li> <b>flip</b>: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
</li><li> <b>fit</b>: so the element keeps in the desired direction, but is re-positioned so it fits.
</li><li> <b>none</b>: not do collision detection.
</li></ul>
<p></p>
</div>
</li>
<li class="option" id="option-using">
<div class="option-header">
<h3 class="option-name"><a href="#option-using">using</a></h3>
<dl>
<dt class="option-type-label">Type:</dt>
<dd class="option-type">Function</dd>
<dt class="option-default-label">Default:</dt>
<dd class="option-default">null</dd>
</dl>
</div>
<div class="option-description">
<p>When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.</p>
</div>
</li>
</ul>
</div>
</div>
</p><!--
Pre-expand include size: 7611 bytes
Post-expand include size: 12379 bytes
Template argument size: 8141 bytes
Maximum: 2097152 bytes
-->
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3784-1!1!0!!en!2 and timestamp 20120220190140 -->