corrade-http-templates – Blame information for rev 62
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
62 | office | 1 | <!doctype html> |
2 | <html lang="en"> |
||
3 | <head> |
||
4 | <meta charset="utf-8"> |
||
5 | <title>Position Visual Test</title> |
||
6 | <style> |
||
7 | .demo { |
||
8 | position: relative; |
||
9 | height: 500px; |
||
10 | width: 80%; |
||
11 | margin: 20px auto; |
||
12 | background: #eee; |
||
13 | } |
||
14 | #target { |
||
15 | width: 60%; |
||
16 | margin: 0 auto; |
||
17 | border: 1px solid #777; |
||
18 | background-color: #fbca93; |
||
19 | text-align: center; |
||
20 | cursor: move; |
||
21 | } |
||
22 | .positionable { |
||
23 | position: absolute; |
||
24 | background-color: #bcd5e6; |
||
25 | text-align: center; |
||
26 | } |
||
27 | .extra-margin { |
||
28 | margin: 0 15px 15px 0; |
||
29 | } |
||
30 | </style> |
||
31 | <script src="../../../external/requirejs/require.js"></script> |
||
32 | <script src="../../../demos/bootstrap.js" data-modules="draggable"> |
||
33 | var within = $( ".demo" ), |
||
34 | positionable = $( ".positionable" ); |
||
35 | function position() { |
||
36 | positionable.position({ |
||
37 | of: $( "#target" ), |
||
38 | my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), |
||
39 | at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), |
||
40 | within: within, |
||
41 | collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() |
||
42 | }); |
||
43 | } |
||
44 | |||
45 | positionable.css( "opacity", 0.5 ); |
||
46 | |||
47 | $( "#target" ).draggable({ |
||
48 | drag: function() { position(); } |
||
49 | }); |
||
50 | |||
51 | $( "#within" ).on( "click", function() { |
||
52 | within = within.is( ".demo" ) ? $( window ) : $( ".demo" ); |
||
53 | position(); |
||
54 | }); |
||
55 | |||
56 | $( "#margin" ).on( "click", function() { |
||
57 | positionable.toggleClass( "extra-margin" ); |
||
58 | position(); |
||
59 | }); |
||
60 | |||
61 | $( "select, input" ).on( "click keyup change", function() { position(); } ); |
||
62 | |||
63 | position(); |
||
64 | </script> |
||
65 | </head> |
||
66 | <body> |
||
67 | |||
68 | <div class="demo"> |
||
69 | <div id="target"> |
||
70 | <p>This is the position target element.</p> |
||
71 | </div> |
||
72 | |||
73 | <div class="positionable" style="width: 75px; height: 75px;"> |
||
74 | <p>to position</p> |
||
75 | </div> |
||
76 | |||
77 | <div class="positionable" style="width:120px; height: 40px;"> |
||
78 | <p>to position 2</p> |
||
79 | </div> |
||
80 | |||
81 | <form style="padding: 20px; margin-top: 75px;"> |
||
82 | <h2>Position configuration:</h2> |
||
83 | <div style="padding-bottom: 20px;"> |
||
84 | <b>my:</b> |
||
85 | <select id="my_horizontal"> |
||
86 | <option value="left">left</option> |
||
87 | <option value="center">center</option> |
||
88 | <option value="right" selected="selected">right</option> |
||
89 | </select> |
||
90 | <select id="my_vertical"> |
||
91 | <option value="top">top</option> |
||
92 | <option value="middle">center</option> |
||
93 | <option value="bottom">bottom</option> |
||
94 | </select> |
||
95 | </div> |
||
96 | <div style="padding-bottom: 20px;"> |
||
97 | <b>at:</b> |
||
98 | <select id="at_horizontal"> |
||
99 | <option value="left">left</option> |
||
100 | <option value="center">center</option> |
||
101 | <option value="right" selected="selected">right</option> |
||
102 | </select> |
||
103 | <select id="at_vertical"> |
||
104 | <option value="top">top</option> |
||
105 | <option value="middle">center</option> |
||
106 | <option value="bottom">bottom</option> |
||
107 | </select> |
||
108 | </div> |
||
109 | <div style="padding-bottom: 20px;"> |
||
110 | <b>collision:</b> |
||
111 | <select id="collision_horizontal"> |
||
112 | <option value="flip">flip</option> |
||
113 | <option value="fit">fit</option> |
||
114 | <option value="flipfit">flipfit</option> |
||
115 | <option value="none">none</option> |
||
116 | </select> |
||
117 | <select id="collision_vertical"> |
||
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 | </div> |
||
124 | <div> |
||
125 | <label for="within">within:</label> |
||
126 | <input id="within" type="checkbox" checked="checked"> |
||
127 | </div> |
||
128 | <div> |
||
129 | <label for="margin">extra margin:</label> |
||
130 | <input id="margin" type="checkbox"> |
||
131 | </div> |
||
132 | </form> |
||
133 | </div> |
||
134 | |||
135 | </body> |
||
136 | </html> |