From d185e8cc05d0b50b4f688e0e2bcba15f39b33f21 Mon Sep 17 00:00:00 2001
From: Eduardo Lundgren <eduardolundgren@gmail.com>
Date: Mon, 9 Jun 2008 06:20:15 +0000
Subject: - Added functional demo application - Removed datepicker folder from
 functional demo folder

---
 demos/functional/templates/ui.resizable.html | 92 ++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 demos/functional/templates/ui.resizable.html

(limited to 'demos/functional/templates/ui.resizable.html')

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
-- 
cgit v1.2.3