← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to lib/jquery/ui/tests/resizable.html

  • Committer: V. Keith Hughitt
  • Date: 2008-06-11 19:37:01 UTC
  • Revision ID: hughitt1@kore-20080611193701-ddjd2nkey4ohmyam
nightly build 06-11-2008: spring cleaning.. preparing for multi-tiered construction of layer entries and their options

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/ui/tests/resizable.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
<meta http-equiv="Content-Language" content="en" />
5
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
 
<title>Resizables Test Page</title>
7
 
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>
8
 
 
9
 
<script type="text/javascript" src="../ui.core.js"></script>
10
 
<script type="text/javascript" src="../ui.resizable.js"></script>
11
 
<script type="text/javascript" src="../ui.draggable.js"></script>
12
 
 
13
 
<link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
14
 
<style type="text/css" media="all">
15
 
 
16
 
body
17
 
{
18
 
        background: #fff;
19
 
        margin: 0;
20
 
        padding: 0;
21
 
        font-family: Arial;
22
 
        font-size: 12px;
23
 
}
24
 
 
25
 
.proxy {
26
 
        border: 1px dashed #000/*#3399ff*/;
27
 
        /*background-color: #b7d3ef;*/
28
 
        /*opacity: 0.3;
29
 
        alpha: 0.3;
30
 
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);*/
31
 
}
32
 
 
33
 
 
34
 
/*.ui-resizable-handle { position: absolute; background: #D0E3FC; display: none; }
35
 
.ui-resizable .ui-resizable-handle { display: block }
36
 
.ui-resizable-n { cursor: n-resize; height: 8px; left: 8px; right: 8px; }
37
 
.ui-resizable-e { cursor: e-resize; width: 8px; top: 8px; bottom: 8px; }
38
 
.ui-resizable-s { cursor: s-resize; height: 8px; left: 8px; right: 8px; }
39
 
.ui-resizable-w { cursor: w-resize; width: 8px; top: 8px; bottom: 8px; }
40
 
 
41
 
.ui-resizable-se { cursor: se-resize; width: 8px; height: 8px; }
42
 
.ui-resizable-sw { cursor: sw-resize; width: 8px; height: 8px; }
43
 
.ui-resizable-ne { cursor: ne-resize; width: 8px; height: 8px; }
44
 
.ui-resizable-nw { cursor: nw-resize; width: 8px; height: 8px; }
45
 
*/
46
 
 
47
 
#log {
48
 
        right:0px;
49
 
        top:0px;
50
 
        background-color:#FAFCFE;
51
 
        border:1px solid #DFE8F6;
52
 
        height:400px;
53
 
        width:300px;
54
 
        position:absolute;
55
 
        overflow:auto;
56
 
}
57
 
 
58
 
.ui-resizable-knob {
59
 
        border: 1px #fff dashed;
60
 
}
61
 
 
62
 
</style>
63
 
</head>
64
 
<body >
65
 
 
66
 
<div id="log">log</div>
67
 
 
68
 
 
69
 
 
70
 
<div id='containment_parent' style='width: 400px; height: 300px; margin: 20px; position: relative; background:#F7FFEF;border:20px solid #E6F7D4; overflow:auto;'>
71
 
        <div id='resizeme_containment' style='width: 200px; height: 100px; border: 1px solid black; position: absolute; background:#fff; padding:10px;'>
72
 
                <div style='position: relative;'>Relative position, containment enabled.</div>
73
 
        </div>
74
 
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
75
 
</div>
76
 
 
77
 
<div style='width: 300px; height: 300px; margin: 20px; position: relative; background:#F7FFEF;border:0px solid #E6F7D4;'>
78
 
        <img id="resizeme_containment_image" src="images/houses.jpg" style='width: 70px; height:70px;border: 0px solid #F0F1F3; margin: 0px;'> 
79
 
</div>
80
 
 
81
 
<div id="resizeme_containment_div_wrapper" style='width: 460px; height: 306px; margin: 20px; position: relative; display: block; background:#F7FFEF;'>
82
 
        <div id="resizeme_containment_wrap_image" style='width: 460px; height: 306px;background: transparent url(../../fx/images/very-cute-puppy.jpg) no-repeat scroll 0%;'></div>
83
 
        <div id="resizeme_containment_div" style='top:0px; left:0px; width: 150px; height:150px; position: absolute; background: transparent url(../../fx/images/very-cute-puppy.jpg) no-repeat scroll 0px 0px;'></div>
84
 
</div>
85
 
 
86
 
<div style='width: 400px; height: 300px; margin: 20px; position: relative; background:#F7FFEF;border:2px solid #E6F7D4;'>
87
 
        <textarea id='resizeme_containment_prop' style='width: 300px; height: 200px;  margin: 0px; padding:0px; border:0px solid #ccc;'>
88
 
        I was made resizable with this code only: $('#textarea').resizable();
89
 
        
90
 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Proin commodo. Nullam nisl ipsum, sagittis sit amet, mattis id, aliquam ac, purus. Suspendisse dignissim lorem id odio. Duis tortor nisl, imperdiet placerat, accumsan eu, lacinia sit amet, mauris. Mauris tellus erat, ullamcorper in, faucibus ut, consectetuer quis, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lectus lacinia augue. Nam eget leo. Fusce magna. Etiam eros. Quisque eget dui. Donec fringilla, libero non rhoncus bibendum, nibh turpis varius orci, quis bibendum metus justo quis nibh. Proin blandit. Suspendisse feugiat consequat lectus. Etiam pharetra suscipit velit. Donec imperdiet quam sit amet erat pretium ullamcorper. Donec quis nisl vitae lacus accumsan faucibus. Vivamus velit turpis, tristique sit amet, malesuada id, molestie et, magna.
91
 
        Nullam blandit, odio rutrum sagittis consectetuer, metus nulla malesuada eros, sit amet aliquam sem leo at augue. Quisque gravida. In et augue ac neque ultricies dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut est ante, egestas eget, dignissim quis, elementum vel, nunc. Suspendisse potenti. Suspendisse mattis feugiat ipsum. Proin at lorem sit amet erat auctor pharetra. Vivamus sit amet augue. Pellentesque consequat ligula in erat. In aliquam porttitor nisl. Donec sed quam. Aliquam accumsan mi nec diam. Etiam imperdiet vehicula nisl. 
92
 
        </textarea>
93
 
</div>
94
 
 
95
 
<div style='width: 300px; height: 200px; margin: 20px; position: relative;'>
96
 
        <textarea id='textarea' style='width: 400px; height: 200px;  margin: 0px; padding:0px; border:0px solid #ccc;'>
97
 
        I was made resizable with this code only: $('#textarea').resizable();
98
 
        
99
 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo. Proin commodo. Nullam nisl ipsum, sagittis sit amet, mattis id, aliquam ac, purus. Suspendisse dignissim lorem id odio. Duis tortor nisl, imperdiet placerat, accumsan eu, lacinia sit amet, mauris. Mauris tellus erat, ullamcorper in, faucibus ut, consectetuer quis, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lectus lacinia augue. Nam eget leo. Fusce magna. Etiam eros. Quisque eget dui. Donec fringilla, libero non rhoncus bibendum, nibh turpis varius orci, quis bibendum metus justo quis nibh. Proin blandit. Suspendisse feugiat consequat lectus. Etiam pharetra suscipit velit. Donec imperdiet quam sit amet erat pretium ullamcorper. Donec quis nisl vitae lacus accumsan faucibus. Vivamus velit turpis, tristique sit amet, malesuada id, molestie et, magna.
100
 
        Nullam blandit, odio rutrum sagittis consectetuer, metus nulla malesuada eros, sit amet aliquam sem leo at augue. Quisque gravida. In et augue ac neque ultricies dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut est ante, egestas eget, dignissim quis, elementum vel, nunc. Suspendisse potenti. Suspendisse mattis feugiat ipsum. Proin at lorem sit amet erat auctor pharetra. Vivamus sit amet augue. Pellentesque consequat ligula in erat. In aliquam porttitor nisl. Donec sed quam. Aliquam accumsan mi nec diam. Etiam imperdiet vehicula nisl. 
101
 
        </textarea>
102
 
</div>
103
 
 
104
 
<div style='width: 300px; height: 200px; margin: 20px; position: relative; top:100px;'>
105
 
        <img id="image" src="images/houses.jpg" style='width: 100px; height:200px;border: 0px solid #F0F1F3; margin: 0px;'> 
106
 
</div>
107
 
 
108
 
<div style='width: 300px; height: 200px; margin: 20px; position: relative;top:30px;'>
109
 
        <img id="image2" src="images/bamboo.jpg" style='width: 300px; height:100px;border: 2px solid #F0F1F3; margin: 0px;'> 
110
 
</div>
111
 
 
112
 
 
113
 
<div style='width: 300px; height: 200px; margin: 20px; position: relative;top:30px;'>
114
 
        <input id="input" type="text" value="Input text test" style='width:300px; height:50px;'> 
115
 
</div>
116
 
 
117
 
 
118
 
<div id='resizeme' style='width: 300px; height: 200px; border: 1px solid black; margin: 20px; position: relative;'>
119
 
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Relative position without proxy (w,nw,n automatically disabled)</div>
120
 
</div>
121
 
 
122
 
<div id='resizeme4' style='width: 300px; height: 200px; border: 1px solid black; margin: 20px; position: relative;'>
123
 
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Relative position with proxy (all directions enabled, manual handlers)</div>
124
 
 
125
 
<div class='ui-resizable-n ui-resizable-handle'></div>
126
 
        <div class='ui-resizable-e ui-resizable-handle'></div>  
127
 
        <div class='ui-resizable-s ui-resizable-handle'></div>
128
 
        <div class='ui-resizable-w ui-resizable-handle'></div>
129
 
        
130
 
        <div class='ui-resizable-se ui-resizable-handle'></div>
131
 
        <div class='ui-resizable-sw ui-resizable-handle'></div>
132
 
        <div class='ui-resizable-ne ui-resizable-handle'></div>
133
 
        <div class='ui-resizable-nw ui-resizable-handle'></div>
134
 
 
135
 
</div>
136
 
 
137
 
<div id='resizeme2' style='width: 300px; height: 200px; border: 1px solid black; position: absolute; top: 100px; right: 400px;'>
138
 
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Absolute position without proxy (all directions enabled)</div>
139
 
</div>
140
 
 
141
 
<div id='resizeme3' style='width: 300px; height: 200px; border: 1px solid black; position: relative; position: absolute; bottom: 20px; right: 20px;'>
142
 
        <div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'><b>Transparent axis</b><br>Absolute position with proxy (all directions enabled), ah, and I'm draggable, too!</div>
143
 
</div>
144
 
 
145
 
<div id='resizeme5' style='width: 300px; height: 200px; border: 1px solid black; position: relative; position: absolute; bottom: 20px; right: 550px;'>
146
 
        <div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'><b>Animated Resizing</b><br>Absolute position with proxy (all directions enabled), ah, and I'm draggable, too!<br><br>
147
 
                
148
 
                $('#resizable5').resizable({ <br>animate: { opacity:.5, fontSize: '0.8em' }, <br>duration: 'slow', <br>easing: 'swing' <br>});
149
 
                
150
 
                <br>
151
 
                <button onclick="$('#resizeme5').resizable({ animate: true, animateDuration: 'slow', animateEasing: 'swing' });">Enable</button>
152
 
                <button onclick="$('#resizeme5').resizable('destroy');">Disable</button>
153
 
                
154
 
                </div>
155
 
                
156
 
</div>
157
 
        
158
 
 
159
 
<div id='resizeme6' style='position: relative;'>
160
 
        <table border='1'><tr><td><div style="padding:10px;" id="tdResize">Resize-me!</div></td><td>Teste</td></td></tr></table>
161
 
</div>
162
 
 
163
 
<br><br><br><br>
164
 
 
165
 
<div class="package" id="pkg1" style="margin: 5px; padding: 20px; background-color: #eee; left: 15%; width: 40%;">
166
 
  <div style="float: left; background-color: #ccc; width: 20%;">Package #1</div>
167
 
  <div style="float: left; background-color: #f00; width: 80px;">$250.00</a></div>
168
 
</div>
169
 
 
170
 
<br>
171
 
 
172
 
<div class="package" id="pkg1" style="margin: 5px; padding: 20px; background-color: #eee; left: 167px; width: 236px;">
173
 
  <div style="float: left; background-color: #ccc; width: 20%;">Package #1</div>
174
 
  <div style="float: left; background-color: #f00; width: 80px;">$250.00</a></div>
175
 
</div>
176
 
 
177
 
<script type="text/javascript">
178
 
        
179
 
if(!window.console) {
180
 
 window.console = {
181
 
        log: function() {
182
 
                $('#log').append(arguments[0]+"<br>");
183
 
                $('#log').scrollTop(999999);    
184
 
        }       
185
 
 }      
186
 
}
187
 
 
188
 
 
189
 
$(document).ready(function(){
190
 
        $(".package").resizable({ handles: 'w, e', autohide: true, minWidth: 10, containment: 'parent'});
191
 
 
192
 
 
193
 
        $('#tdResize').resizable();
194
 
 
195
 
        $('#resizeme_containment_div').resizable({
196
 
                
197
 
                containment: $('#resizeme_containment_div_wrapper'),
198
 
                
199
 
                //proxy: 'proxy',
200
 
                
201
 
                //ghost: true,
202
 
                
203
 
                knobHandles: true,
204
 
                
205
 
                //animate:true,
206
 
                
207
 
                handles: 'all',
208
 
                //transparent: true,
209
 
                aspectRatio: true,
210
 
                //autohide: true,
211
 
                minWidth: 100,
212
 
                minHeight: 100,
213
 
                maxWidth: 250,
214
 
                maxHeight: 250,
215
 
                resize: function(e, ui) {
216
 
                this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
217
 
        },
218
 
                stop: function(e, ui) {
219
 
                this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
220
 
        }
221
 
        })
222
 
        .draggable({
223
 
                cursor: 'move',
224
 
                containment: $('#resizeme_containment_div_wrapper'),
225
 
                drag: function(e, ui) {
226
 
                        this.style.backgroundPosition = '-' + (ui.position.left) + 'px -' + (ui.position.top) + 'px';
227
 
                }
228
 
        });
229
 
        
230
 
        $('#resizeme_containment_wrap_image').css({ opacity: 0.5 });
231
 
        
232
 
        
233
 
        $('#resizeme_containment, #resizeme_containment_prop, #resizeme_containment_image').resizable({
234
 
                //proxy: "proxy",
235
 
                handles: 'all',
236
 
                //autohide: true,
237
 
                
238
 
                minWidth: 50,
239
 
                minHeight: 50,
240
 
                
241
 
                //ghost: true,
242
 
                
243
 
                //grid: [40,40],
244
 
                
245
 
                start: function() {
246
 
                        //console.log('start')
247
 
                },
248
 
                
249
 
                resize: function() {
250
 
                        //console.log('resize')
251
 
                },
252
 
                
253
 
                stop: function() {
254
 
                        //console.log('stop')
255
 
                },
256
 
                
257
 
                //containment: 'document',
258
 
                //containment:$('#containment_parent'),
259
 
                containment:'parent',
260
 
                
261
 
                //aspectRatio: 'preserve',
262
 
                preventDefault: true,
263
 
                preserveCursor: true,
264
 
                disableSelection: true
265
 
        });
266
 
 
267
 
        $('#textarea').resizable({
268
 
                
269
 
                //proxy: "proxy",
270
 
                
271
 
                handles: 'all',
272
 
                
273
 
                ghost: true,
274
 
                
275
 
                autohide: true,
276
 
                
277
 
                maxHeight: 500,
278
 
                maxWidth: 500,
279
 
                minWidth: 100,
280
 
                minHeight: 50,
281
 
                
282
 
                grid: [50, 50],
283
 
                
284
 
                animate: true,
285
 
                
286
 
                //containment: document,
287
 
                containment: 'document',
288
 
                //aspectRatio: 'preserve',
289
 
                preventDefault: true,
290
 
                preserveCursor: true,
291
 
                disableSelection: true
292
 
        });
293
 
 
294
 
        $('#image').resizable({
295
 
                proxy: "proxy",
296
 
                handles: 'all',
297
 
                minWidth: 50,
298
 
                minHeight: 50,
299
 
                
300
 
                //grid: [50, 50],
301
 
                
302
 
                ghost: 'ghost',
303
 
                
304
 
                knobHandles: true,
305
 
                
306
 
                animate: true,
307
 
                
308
 
                maxHeight: 400,
309
 
                maxWidth: 400,
310
 
                //containment: 'parent',
311
 
                aspectRatio: 'preserve',
312
 
                autohide: true
313
 
        });
314
 
        
315
 
        $('#image2').resizable({
316
 
                proxy: "proxy",
317
 
                handles: 'all',
318
 
                //containment: 'parent',
319
 
                        minWidth: 50,
320
 
                minHeight: 50,
321
 
                maxHeight: 200,
322
 
                maxWidth: 400,
323
 
                
324
 
                animate: true,
325
 
                animateDuration: 'slow',
326
 
                animateEasing: 'swing',
327
 
                
328
 
                aspectRatio: 'preserve'
329
 
                //aspectRatio: false
330
 
                //aspectRatio: 1.1
331
 
                
332
 
        });
333
 
        
334
 
 
335
 
        $('#input').resizable({
336
 
                proxy: "proxy",
337
 
                handles: 'e,se,s',
338
 
                //ghost: true,
339
 
                //containment: 'parent',
340
 
                aspectRatio: 'preserve'
341
 
        });
342
 
        
343
 
        
344
 
        $('#resizeme, #resizeme2').resizable({
345
 
                //proxy: "proxy",
346
 
                minWidth: 200,
347
 
                minHeight: 100,
348
 
                //maxWidth: 500,
349
 
                //maxHeight: 300,
350
 
                
351
 
                start: function(e,ui) {
352
 
                        //console.log('start ', ui);    
353
 
                },
354
 
                stop: function(e,ui) {
355
 
                        //console.log('stop ', ui);     
356
 
                },
357
 
                resize: function(e,ui) {
358
 
                        //console.log(e);       
359
 
                },
360
 
                alsoResize: [ "#resizeme3" ]            
361
 
        });
362
 
        
363
 
        
364
 
        $('#resizeme3').resizable({
365
 
                //proxy: "proxy",
366
 
                minWidth: 200,
367
 
                minHeight: 100,
368
 
                maxWidth: 500,
369
 
                maxHeight: 300,
370
 
                transparent: true,
371
 
                
372
 
                handles: "s, se, e",
373
 
                
374
 
                preventDefault: true,
375
 
                
376
 
                start: function(e,ui) {
377
 
                        //console.log('start ', ui);    
378
 
                },
379
 
                stop: function(e,ui) {
380
 
                        //console.log('stop ', ui);     
381
 
                },
382
 
                resize: function(e,ui) {
383
 
                        //console.log(e);       
384
 
                }               
385
 
        });
386
 
        
387
 
        
388
 
        
389
 
        $('#resizeme5').resizable({
390
 
                //proxy: "proxy",
391
 
                minWidth: 200,
392
 
                minHeight: 100,
393
 
                maxWidth: 500,
394
 
                maxHeight: 300,
395
 
                
396
 
                ghost: true,
397
 
                
398
 
                handles: "all",
399
 
                
400
 
                preventDefault: true,
401
 
                
402
 
                //animate: true,
403
 
                //animate: false,
404
 
                animate: true,
405
 
                animateDuration: 'slow',
406
 
                animateEasing: 'swing',
407
 
                
408
 
                start: function(e,ui) {
409
 
                        //console.log('start ', ui);    
410
 
                },
411
 
                stop: function(e,ui) {
412
 
                        //console.log('stop ', ui);     
413
 
                },
414
 
                resize: function(e,ui) {
415
 
                        //console.log(e);       
416
 
                }               
417
 
        });
418
 
        
419
 
        $('#resizeme4').resizable({
420
 
                proxy: "proxy",
421
 
                minWidth: 200,
422
 
                minHeight: 100,
423
 
                //maxWidth: 500,
424
 
                //maxHeight: 300,
425
 
                handles: {
426
 
                        n: '.ui-resizable-n',
427
 
                        e: '.ui-resizable-e',
428
 
                        s: '.ui-resizable-s',
429
 
                        w: '.ui-resizable-w',
430
 
                        se: '.ui-resizable-se',
431
 
                        sw: '.ui-resizable-sw',
432
 
                        ne: '.ui-resizable-ne',
433
 
                        nw: '.ui-resizable-nw'
434
 
                },
435
 
                start: function(e,ui) {
436
 
                        //console.log('start ', ui);    
437
 
                },
438
 
                stop: function(e,ui) {
439
 
                        //console.log('stop ', ui);     
440
 
                },
441
 
                resize: function(e,ui) {
442
 
                        //console.log(e);       
443
 
                }               
444
 
        });
445
 
        
446
 
        $('#resizeme3, #resizeme5, .ui-wrapper:parent').draggable({ handle: "div:not(.ui-resizable-handle)" });
447
 
        
448
 
        //$('#resizeme_containment').draggable({containment: 'parent'});
449
 
        
450
 
        //$("#resizeme3").animate({ height: 500, width: 500, opacity: 'hide' }, "easein");
451
 
 
452
 
 
453
 
});
454
 
</script>
455
 
</body>
456
 
</html>