source: ether_statistics/web/resources/js/jquery-ui-1.8.16.custom/development-bundle/demos/position/default.html @ 569

Last change on this file since 569 was 569, checked in by vmipsl, 12 years ago

Nouveau projet
File size: 3.7 KB
Line 
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.6.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        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>
Note: See TracBrowser for help on using the repository browser.