|
1 |
|
2 <ul class="UIAPIPlugin-toc"> |
|
3 <li><a href="#overview">Overview</a></li> |
|
4 <li><a href="#options">Arguments</a></li> |
|
5 </ul> |
|
6 <div class="UIAPIPlugin"> |
|
7 <h1>jQuery UI Position Utility</h1> |
|
8 <div id="overview"> |
|
9 <h2 class="top-header">Overview</h2> |
|
10 <div id="overview-main"> |
|
11 <p>Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.</p> |
|
12 <p>Do not need ui.core.js or effects.core.js.</p> |
|
13 </div> |
|
14 <div id="overview-dependencies"> |
|
15 <h3>Dependencies</h3> |
|
16 <ul> |
|
17 <li><i>none (only jQuery core)</i></li> |
|
18 </ul> |
|
19 </div> |
|
20 <div id="overview-example"> |
|
21 <h3>Example</h3> |
|
22 <div id="overview-example" class="example"> |
|
23 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> |
|
24 <p><div id="demo" class="tabs-container" rel="300"> |
|
25 Clicking on the green element transfers to the other.<br /> |
|
26 </p> |
|
27 <pre> |
|
28 $("#position1").position({ |
|
29 my: "center", |
|
30 at: "center", |
|
31 of: "#targetElement" |
|
32 }); |
|
33 $("#position2").position({ |
|
34 my: "left top", |
|
35 at: "left top", |
|
36 of: "#targetElement" |
|
37 }); |
|
38 $("#position3").position({ |
|
39 my: "right center", |
|
40 at: "right bottom", |
|
41 of: "#targetElement" |
|
42 }); |
|
43 $(document).mousemove(function(ev){ |
|
44 $("#position4").position({ |
|
45 my: "left bottom", |
|
46 of: ev, |
|
47 offset: "3 -3", |
|
48 collision: "fit" |
|
49 }); |
|
50 }); |
|
51 |
|
52 </pre> |
|
53 <p></div><div id="source" class="tabs-container"> |
|
54 </p> |
|
55 <pre><!DOCTYPE html> |
|
56 <html> |
|
57 <head> |
|
58 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> |
|
59 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> |
|
60 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> |
|
61 <style type="text/css"> |
|
62 #targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; } |
|
63 .positionDiv { width:50px;height:50px;opacity:0.6; } |
|
64 #position1 {background-color:#F00;} |
|
65 #position2 {background-color:#0F0;} |
|
66 #position3 {background-color:#00F;} |
|
67 #position4 {background-color:#FF0;} |
|
68 </style> |
|
69 |
|
70 <script> |
|
71 $(document).ready(function() { |
|
72 |
|
73 $("#position1").position({ |
|
74 my: "center", |
|
75 at: "center", |
|
76 of: "#targetElement" |
|
77 }); |
|
78 $("#position2").position({ |
|
79 my: "left top", |
|
80 at: "left top", |
|
81 of: "#targetElement" |
|
82 }); |
|
83 $("#position3").position({ |
|
84 my: "right center", |
|
85 at: "right bottom", |
|
86 of: "#targetElement" |
|
87 }); |
|
88 $(document).mousemove(function(ev){ |
|
89 $("#position4").position({ |
|
90 my: "left bottom", |
|
91 of: ev, |
|
92 offset: "3 -3", |
|
93 collision: "fit" |
|
94 }); |
|
95 }); |
|
96 |
|
97 }); |
|
98 </script> |
|
99 </head> |
|
100 <body style="font-size:62.5%;"> |
|
101 |
|
102 <div id="targetElement"> |
|
103 <div class="positionDiv" id="position1"></div> |
|
104 <div class="positionDiv" id="position2"></div> |
|
105 <div class="positionDiv" id="position3"></div> |
|
106 <div class="positionDiv" id="position4"></div> |
|
107 </div> |
|
108 |
|
109 </body> |
|
110 </html> |
|
111 </pre> |
|
112 <p></div> |
|
113 </p><p></div> |
|
114 </div> |
|
115 </div> |
|
116 <div id="options"> |
|
117 <h2 class="top-header">Arguments</h2> |
|
118 <ul class="options-list"> |
|
119 |
|
120 <li class="option" id="option-my"> |
|
121 <div class="option-header"> |
|
122 <h3 class="option-name"><a href="#option-my">my</a></h3> |
|
123 <dl> |
|
124 <dt class="option-type-label">Type:</dt> |
|
125 <dd class="option-type">String</dd> |
|
126 |
|
127 </dl> |
|
128 </div> |
|
129 <div class="option-description"> |
|
130 <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> |
|
131 </div> |
|
132 </li> |
|
133 |
|
134 |
|
135 <li class="option" id="option-at"> |
|
136 <div class="option-header"> |
|
137 <h3 class="option-name"><a href="#option-at">at</a></h3> |
|
138 <dl> |
|
139 <dt class="option-type-label">Type:</dt> |
|
140 <dd class="option-type">String</dd> |
|
141 |
|
142 </dl> |
|
143 </div> |
|
144 <div class="option-description"> |
|
145 <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> |
|
146 </div> |
|
147 </li> |
|
148 |
|
149 |
|
150 <li class="option" id="option-of"> |
|
151 <div class="option-header"> |
|
152 <h3 class="option-name"><a href="#option-of">of</a></h3> |
|
153 <dl> |
|
154 <dt class="option-type-label">Type:</dt> |
|
155 <dd class="option-type">Selector</dd> |
|
156 |
|
157 </dl> |
|
158 </div> |
|
159 <div class="option-description"> |
|
160 <p>Element to position against. You can use a browser event object contains pageX and pageY values. Example: "#top-menu"</p> |
|
161 </div> |
|
162 </li> |
|
163 |
|
164 |
|
165 <li class="option" id="option-offset"> |
|
166 <div class="option-header"> |
|
167 <h3 class="option-name"><a href="#option-offset">offset</a></h3> |
|
168 <dl> |
|
169 <dt class="option-type-label">Type:</dt> |
|
170 <dd class="option-type">String</dd> |
|
171 |
|
172 </dl> |
|
173 </div> |
|
174 <div class="option-description"> |
|
175 <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> |
|
176 </div> |
|
177 </li> |
|
178 |
|
179 |
|
180 <li class="option" id="option-collision"> |
|
181 <div class="option-header"> |
|
182 <h3 class="option-name"><a href="#option-collision">collision</a></h3> |
|
183 <dl> |
|
184 <dt class="option-type-label">Type:</dt> |
|
185 <dd class="option-type">String</dd> |
|
186 |
|
187 </dl> |
|
188 </div> |
|
189 <div class="option-description"> |
|
190 <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". |
|
191 </p> |
|
192 <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. |
|
193 </li><li> <b>fit</b>: so the element keeps in the desired direction, but is re-positioned so it fits. |
|
194 </li><li> <b>none</b>: not do collision detection. |
|
195 </li></ul> |
|
196 <p></p> |
|
197 </div> |
|
198 </li> |
|
199 |
|
200 |
|
201 <li class="option" id="option-using"> |
|
202 <div class="option-header"> |
|
203 <h3 class="option-name"><a href="#option-using">using</a></h3> |
|
204 <dl> |
|
205 <dt class="option-type-label">Type:</dt> |
|
206 <dd class="option-type">Function</dd> |
|
207 |
|
208 </dl> |
|
209 </div> |
|
210 <div class="option-description"> |
|
211 <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> |
|
212 </div> |
|
213 </li> |
|
214 |
|
215 |
|
216 <li class="option" id="option-bgiframe"> |
|
217 <div class="option-header"> |
|
218 <h3 class="option-name"><a href="#option-bgiframe">bgiframe</a></h3> |
|
219 <dl> |
|
220 <dt class="option-type-label">Type:</dt> |
|
221 <dd class="option-type">Boolean</dd> |
|
222 |
|
223 <dt class="option-default-label">Default:</dt> |
|
224 <dd class="option-default">true</dd> |
|
225 |
|
226 </dl> |
|
227 </div> |
|
228 <div class="option-description"> |
|
229 <p>Applies the bgiframe plugin when set to true. Only applies when bgiframe is actually loaded, nothing happens otherwise.</p> |
|
230 </div> |
|
231 </li> |
|
232 |
|
233 </ul> |
|
234 </div> |
|
235 </div> |
|
236 |
|
237 </p><!-- |
|
238 Pre-expand include size: 7818 bytes |
|
239 Post-expand include size: 11726 bytes |
|
240 Template argument size: 7916 bytes |
|
241 Maximum: 2097152 bytes |
|
242 --> |
|
243 |
|
244 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3784-1!1!0!!en!2 and timestamp 20100421075208 --> |