1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizable Demo</title>
<link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="../jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<style>
.proxy { border: 1px dashed #000; };
</style>
</head>
<body class="flora">
<h2>1. Default, no options, three handles</h2>
<div class="playground">
<div id='simpleResize' class="ui-wrapper example" style="height:100px; width: 350px;">
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>
Resize me<br/>
I was made resizable with this code only:<br/> $('div').resizable({ minHeight: 100, minWidth: 350 });
</div>
</div><br />
<button onclick="$('#simpleResize').resizable('enable')">Enable</button>
<button onclick="$('#simpleResize').resizable('disable')">Disable</button>
</div>
<h2>2. Autohiding handles (all directions)</h2>
<div class="playground">
<div id='autoHideAllHandles' class="ui-wrapper example" style="height:100px; width: 350px; position:relative;">
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>
Resize me<br/>
I was made resizable with this code only:<br/> $('div').resizable({ handles: 'all', autohide: true, minHeight: 100, minWidth: 350 });
</div>
</div>
</div>
<h2>3. Textareas and Inputs</h2>
<div class="playground">
<textarea id='simpleTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
I was made resizable with this code only:
$('#simpleTextarea').resizable({ minHeight: 50, minWidth: 150 });</textarea>
<br />
<textarea id='autohideTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
I was made resizable with this code only:
$('#autohideTextarea').resizable({ autohide: true, minHeight: 50, minWidth: 150 });</textarea>
<br />
<textarea id='transparentTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
I was made resizable with this code only:
$('#transparentTextarea').resizable({ transparent: true, handles: 'all', minHeight: 50, minWidth: 150 });</textarea>
<br />
<textarea id='allHandlesTextarea' style='margin: 0px; padding: 0px; height:100px; width: 350px;' class="example">Resize me
I was made resizable with this code only:
$('#allHandlesTextarea').resizable({ handles: 'all', proxy:'proxy', minHeight: 50, minWidth: 150 });</textarea>
<br />
<input id="simpleInputText" type="text" value="Input Text Resizing example!" class="example" style="margin: 0px; padding: 0px; width: 200px; height: 30px;">
<br />
<input id="simpleInputButton" type="button" value="Button Resizing!" style="margin: 0px; padding: 0px; height: 30px;">
</div>
<h2>4. Images</h2>
<div class="playground">
<b>4.1 Preserve Aspect Ratio</b><br>
$('#preserveRatioImage').resizable({ aspectRatio: 'preserve' }); <br><br>
<img style='margin: 0;' id="preserveRatioImage" src="images/resizable.jpg" title="$('#preserveRatioImage').resizable({ aspectRatio: 'preserve' });" /><br>
<b>4.2 Image Resize with a helper (proxy) - Increases Performance!</b><br>
$('#proxyImage').resizable({ proxy: 'proxy', aspectRatio: 'preserve' }); <br><br>
<img style='margin: 0;' id="proxyImage" src="images/resizable.jpg" title="$('#proxyImage').resizable({ proxy: 'proxy', aspectRatio: 'preserve' });" /><br>
<b>4.3 Transparent Handles</b><br>
$('#transparentImage').resizable({ transparent: true, proxy: 'proxy' }); <br><br>
<img style='margin: 0;' id="transparentImage" src="images/resizable.jpg" title="$('#transparentImage').resizable({ transparent: true, proxy: 'proxy' });" /><br>
<b>4.4 Simple Image Resize without a helper (proxy)</b><br>
$('#simpleImage').resizable(); <br><br>
<img style='margin: 0;' id="simpleImage" src="images/resizable.jpg" title="$('#simpleImage').resizable();" /><br>
</div>
<script type="text/javascript">
$(window).bind("load",function(){
$('#simpleResize').resizable({ minHeight: 100, minWidth: 350 });
$('#autoHideAllHandles').resizable({ handles: 'all', autohide: true, minHeight: 100, minWidth: 350 });
$('#simpleTextarea').resizable({ minHeight: 50, minWidth: 150 });
$('#autohideTextarea').resizable({ autohide: true, minHeight: 50, minWidth: 150 });
$('#transparentTextarea').resizable({ transparent: true, handles: 'all', minHeight: 50, minWidth: 150 });
$('#allHandlesTextarea').resizable({ handles: 'all', proxy:'proxy', minHeight: 50, minWidth: 150 });
$('#simpleInputText').resizable();
$('#simpleInputButton').resizable();
$('#preserveRatioImage').resizable({ aspectRatio: 'preserve' });
$('#proxyImage').resizable({proxy: 'proxy', aspectRatio: 'preserve' });
$('#transparentImage').resizable({ transparent: true, proxy: 'proxy' });
$('#simpleImage').resizable();
});
</script>
</body>
</html>
|
