Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/demos/position/default.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
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>