diff options
Diffstat (limited to 'demos/functional/templates/ui.resizable.html')
| -rw-r--r-- | demos/functional/templates/ui.resizable.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/demos/functional/templates/ui.resizable.html b/demos/functional/templates/ui.resizable.html new file mode 100644 index 000000000..121d70a98 --- /dev/null +++ b/demos/functional/templates/ui.resizable.html @@ -0,0 +1,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>
\ No newline at end of file |