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
|
<script type="text/javascript">
var model = {
renderAt: '#containerDemo',
title: 'Resizable Demos',
demos: [
{
title: 'Simple div Resizing',
desc: 'You can play with the options listed below and check the results on the div.',
html: '<div id="simpleDiv" class="resizable">Resize me!</div><br>',
destroy: '$("#simpleDiv").resizable("destroy");',
options: [
{ desc: 'All handles', source: '$("#simpleDiv").resizable({ handles: "all"});' },
{ desc: 'Using proxy', source: '$("#simpleDiv").resizable({ handles: "all", proxy: "proxy" });' },
{ desc: 'Preserving ratio', source: '$("#simpleDiv").resizable({ handles: "all", aspectRatio: true, proxy: "proxy" });' },
{ desc: 'Autohide handles', source: '$("#simpleDiv").resizable({ handles: "all", autohide:true });' },
{ desc: 'Transparent handles', source: '$("#simpleDiv").resizable({ handles: "all", transparent: true, proxy: "proxy" });' },
{ desc: 'Pre-defined handles (e,w)', source: '$("#simpleDiv").resizable({ handles: "e,w" });' },
{ desc: 'Resize on a grid [50, 50]', source: '$("#simpleDiv").resizable({ handles: "all", grid: [50, 50] });' },
{ desc: 'Min/Max height and width', source: '$("#simpleDiv").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' },
{ desc: 'Animated resizing', source: '$("#simpleDiv").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
{ desc: 'Knob handles (image cropper like)', source: '$("#simpleDiv").resizable({ handles: "all", knobHandles: true });' },
{ desc: 'Ghost resizing', source: '$("#simpleDiv").resizable({ handles: "all", ghost:true });' },
{ desc: 'Prevent default browser resize (safari textarea)', source: '$("#simpleDiv").resizable({ handles: "all", preventDefault: true });' },
{ desc: 'Preserve cursor on resize', source: '$("#simpleDiv").resizable({ handles: "all", preserveCursor: true });' },
{ desc: 'Using callbacks', source: '$("#simpleDiv").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
]
},
{
title: 'Image Resizing',
desc: 'Try resize images! You can play with the options listed below.',
html: '<img id="resizebleImage" src="templates/images/puppy.jpg" width="200px" height="135px">',
destroy: '$("#resizebleImage").resizable("destroy");',
options: [
{ desc: 'Ghost resizing', source: '$("#resizebleImage").resizable({ handles: "all", ghost:true });' },
{ desc: 'All handles', source: '$("#resizebleImage").resizable({ handles: "all"});' },
{ desc: 'Using proxy', source: '$("#resizebleImage").resizable({ handles: "all", proxy: "proxy" });' },
{ desc: 'Preserving ratio', source: '$("#resizebleImage").resizable({ handles: "all", aspectRatio: true, proxy: "proxy" });' },
{ desc: 'Autohide handles', source: '$("#resizebleImage").resizable({ handles: "all", autohide:true });' },
{ desc: 'Transparent handles', source: '$("#resizebleImage").resizable({ handles: "all", transparent: true, proxy: "proxy" });' },
{ desc: 'Pre-defined handles (e,w)', source: '$("#resizebleImage").resizable({ handles: "e,w" });' },
{ desc: 'Resize on a grid [50, 50]', source: '$("#resizebleImage").resizable({ handles: "all", grid: [50, 50] });' },
{ desc: 'Min/Max height and width', source: '$("#resizebleImage").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' },
{ desc: 'Animated resizing', source: '$("#resizebleImage").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
{ desc: 'Knob handles (image cropper like)', source: '$("#resizebleImage").resizable({ handles: "all", knobHandles: true });' },
{ desc: 'Prevent default browser resize (safari textarea)', source: '$("#resizebleImage").resizable({ handles: "all", preventDefault: true });' },
{ desc: 'Preserve cursor on resize', source: '$("#resizebleImage").resizable({ handles: "all", preserveCursor: true });' },
{ desc: 'Using callbacks', source: '$("#resizebleImage").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
]
},
{
title: 'Textarea Resizing',
desc: 'Try to <b>resize textarea</b>! You can play with the options listed below.',
html: '<textarea id="resizebleTextarea">I am a textarea!</textarea>',
destroy: '$("#resizebleTextarea").resizable("destroy");',
options: [
{ desc: 'All handles', source: '$("#resizebleTextarea").resizable({ handles: "all"});' },
{ desc: 'Using proxy', source: '$("#resizebleTextarea").resizable({ handles: "all", proxy: "proxy" });' },
{ desc: 'Preserving ratio', source: '$("#resizebleTextarea").resizable({ handles: "all", aspectRatio: true, proxy: "proxy" });' },
{ desc: 'Autohide handles', source: '$("#resizebleTextarea").resizable({ handles: "all", autohide:true });' },
{ desc: 'Transparent handles', source: '$("#resizebleTextarea").resizable({ handles: "all", transparent: true, proxy: "proxy" });' },
{ desc: 'Pre-defined handles (e,w)', source: '$("#resizebleTextarea").resizable({ handles: "e,w" });' },
{ desc: 'Resize on a grid [50, 50]', source: '$("#resizebleTextarea").resizable({ handles: "all", grid: [50, 50] });' },
{ desc: 'Min/Max height and width', source: '$("#resizebleTextarea").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' },
{ desc: 'Animated resizing', source: '$("#resizebleTextarea").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
{ desc: 'Knob handles (image cropper like)', source: '$("#resizebleTextarea").resizable({ handles: "all", knobHandles: true });' },
{ desc: 'Ghost resizing', source: '$("#resizebleTextarea").resizable({ handles: "all", ghost:true });' },
{ desc: 'Prevent default browser resize (safari textarea)', source: '$("#resizebleTextarea").resizable({ handles: "all", preventDefault: true });' },
{ desc: 'Preserve cursor on resize', source: '$("#resizebleTextarea").resizable({ handles: "all", preserveCursor: true });' },
{ desc: 'Using callbacks', source: '$("#resizebleTextarea").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
]
}
]
};
$(function(){
uiRenderDemo(model);
});
</script>
|
