|
7
|
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.10.2.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 #parent {
|
|
|
16 width: 60%;
|
|
|
17 height: 40px;
|
|
|
18 margin: 10px auto;
|
|
|
19 padding: 5px;
|
|
|
20 border: 1px solid #777;
|
|
|
21 background-color: #fbca93;
|
|
|
22 text-align: center;
|
|
|
23 }
|
|
|
24 .positionable {
|
|
|
25 position: absolute;
|
|
|
26 display: block;
|
|
|
27 right: 0;
|
|
|
28 bottom: 0;
|
|
|
29 background-color: #bcd5e6;
|
|
|
30 text-align: center;
|
|
|
31 }
|
|
|
32 #positionable1 {
|
|
|
33 width: 75px;
|
|
|
34 height: 75px;
|
|
|
35 }
|
|
|
36 #positionable2 {
|
|
|
37 width: 120px;
|
|
|
38 height: 40px;
|
|
|
39 }
|
|
|
40 select, input {
|
|
|
41 margin-left: 15px;
|
|
|
42 }
|
|
|
43 </style>
|
|
|
44 <script>
|
|
|
45 $(function() {
|
|
|
46 function position() {
|
|
|
47 $( ".positionable" ).position({
|
|
|
48 of: $( "#parent" ),
|
|
|
49 my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
|
|
|
50 at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
|
|
|
51 collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
|
|
|
52 });
|
|
|
53 }
|
|
|
54
|
|
|
55 $( ".positionable" ).css( "opacity", 0.5 );
|
|
|
56
|
|
|
57 $( "select, input" ).bind( "click keyup change", position );
|
|
|
58
|
|
|
59 $( "#parent" ).draggable({
|
|
|
60 drag: position
|
|
|
61 });
|
|
|
62
|
|
|
63 position();
|
|
|
64 });
|
|
|
65 </script>
|
|
|
66 </head>
|
|
|
67 <body>
|
|
|
68
|
|
|
69 <div id="parent">
|
|
|
70 <p>
|
|
|
71 This is the position parent element.
|
|
|
72 </p>
|
|
|
73 </div>
|
|
|
74
|
|
|
75 <div class="positionable" id="positionable1">
|
|
|
76 <p>
|
|
|
77 to position
|
|
|
78 </p>
|
|
|
79 </div>
|
|
|
80
|
|
|
81 <div class="positionable" id="positionable2">
|
|
|
82 <p>
|
|
|
83 to position 2
|
|
|
84 </p>
|
|
|
85 </div>
|
|
|
86
|
|
|
87 <div style="padding: 20px; margin-top: 75px;">
|
|
|
88 position...
|
|
|
89 <div style="padding-bottom: 20px;">
|
|
|
90 <b>my:</b>
|
|
|
91 <select id="my_horizontal">
|
|
|
92 <option value="left">left</option>
|
|
|
93 <option value="center">center</option>
|
|
|
94 <option value="right">right</option>
|
|
|
95 </select>
|
|
|
96 <select id="my_vertical">
|
|
|
97 <option value="top">top</option>
|
|
|
98 <option value="center">center</option>
|
|
|
99 <option value="bottom">bottom</option>
|
|
|
100 </select>
|
|
|
101 </div>
|
|
|
102 <div style="padding-bottom: 20px;">
|
|
|
103 <b>at:</b>
|
|
|
104 <select id="at_horizontal">
|
|
|
105 <option value="left">left</option>
|
|
|
106 <option value="center">center</option>
|
|
|
107 <option value="right">right</option>
|
|
|
108 </select>
|
|
|
109 <select id="at_vertical">
|
|
|
110 <option value="top">top</option>
|
|
|
111 <option value="center">center</option>
|
|
|
112 <option value="bottom">bottom</option>
|
|
|
113 </select>
|
|
|
114 </div>
|
|
|
115 <div style="padding-bottom: 20px;">
|
|
|
116 <b>collision:</b>
|
|
|
117 <select id="collision_horizontal">
|
|
|
118 <option value="flip">flip</option>
|
|
|
119 <option value="fit">fit</option>
|
|
|
120 <option value="flipfit">flipfit</option>
|
|
|
121 <option value="none">none</option>
|
|
|
122 </select>
|
|
|
123 <select id="collision_vertical">
|
|
|
124 <option value="flip">flip</option>
|
|
|
125 <option value="fit">fit</option>
|
|
|
126 <option value="flipfit">flipfit</option>
|
|
|
127 <option value="none">none</option>
|
|
|
128 </select>
|
|
|
129 </div>
|
|
|
130 </div>
|
|
|
131
|
|
|
132 <div class="demo-description">
|
|
|
133 <p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
|
|
|
134 <br>Drag around the parent element to see collision detection in action.</p>
|
|
|
135 </div>
|
|
|
136 </body>
|
|
|
137 </html>
|
