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/images/P1010020.JPG     | Bin 0 -> 4735 bytes
 demos/functional/templates/images/P1010036.JPG     | Bin 0 -> 3996 bytes
 demos/functional/templates/images/P1010039.JPG     | Bin 0 -> 6783 bytes
 demos/functional/templates/images/P1010044.JPG     | Bin 0 -> 7084 bytes
 demos/functional/templates/images/P1010050.JPG     | Bin 0 -> 6418 bytes
 demos/functional/templates/images/P1010055.JPG     | Bin 0 -> 2645 bytes
 demos/functional/templates/images/P1010058.JPG     | Bin 0 -> 3727 bytes
 demos/functional/templates/images/P1010059.JPG     | Bin 0 -> 3287 bytes
 demos/functional/templates/images/P1010061.JPG     | Bin 0 -> 5062 bytes
 demos/functional/templates/images/P1010063.JPG     | Bin 0 -> 5042 bytes
 demos/functional/templates/images/Thumbs.db        | Bin 0 -> 42496 bytes
 demos/functional/templates/images/puppy.jpg        | Bin 0 -> 13658 bytes
 demos/functional/templates/ui.accordion.data.html  |  35 ++++++++
 demos/functional/templates/ui.accordion.html       |  33 ++++++++
 demos/functional/templates/ui.draggable.html       |  85 +++++++++++++++++++
 demos/functional/templates/ui.droppable.html       |  87 +++++++++++++++++++
 .../functional/templates/ui.droppable.photos.html  |  17 ++++
 demos/functional/templates/ui.resizable.html       |  92 +++++++++++++++++++++
 demos/functional/templates/ui.selectable.data.html |   8 ++
 demos/functional/templates/ui.selectable.html      |  31 +++++++
 demos/functional/templates/ui.slider.html          |  44 ++++++++++
 demos/functional/templates/ui.sortable.ex1.html    |  40 +++++++++
 demos/functional/templates/ui.sortable.ex3.html    |  19 +++++
 demos/functional/templates/ui.sortable.html        |  55 ++++++++++++
 demos/functional/templates/ui.tabs.ex1.html        |  35 ++++++++
 demos/functional/templates/ui.tabs.html            |  54 ++++++++++++
 demos/functional/templates/ui.tabs.php             |  88 ++++++++++++++++++++
 27 files changed, 723 insertions(+)
 create mode 100644 demos/functional/templates/images/P1010020.JPG
 create mode 100644 demos/functional/templates/images/P1010036.JPG
 create mode 100644 demos/functional/templates/images/P1010039.JPG
 create mode 100644 demos/functional/templates/images/P1010044.JPG
 create mode 100644 demos/functional/templates/images/P1010050.JPG
 create mode 100644 demos/functional/templates/images/P1010055.JPG
 create mode 100644 demos/functional/templates/images/P1010058.JPG
 create mode 100644 demos/functional/templates/images/P1010059.JPG
 create mode 100644 demos/functional/templates/images/P1010061.JPG
 create mode 100644 demos/functional/templates/images/P1010063.JPG
 create mode 100644 demos/functional/templates/images/Thumbs.db
 create mode 100644 demos/functional/templates/images/puppy.jpg
 create mode 100644 demos/functional/templates/ui.accordion.data.html
 create mode 100644 demos/functional/templates/ui.accordion.html
 create mode 100644 demos/functional/templates/ui.draggable.html
 create mode 100644 demos/functional/templates/ui.droppable.html
 create mode 100644 demos/functional/templates/ui.droppable.photos.html
 create mode 100644 demos/functional/templates/ui.resizable.html
 create mode 100644 demos/functional/templates/ui.selectable.data.html
 create mode 100644 demos/functional/templates/ui.selectable.html
 create mode 100644 demos/functional/templates/ui.slider.html
 create mode 100644 demos/functional/templates/ui.sortable.ex1.html
 create mode 100644 demos/functional/templates/ui.sortable.ex3.html
 create mode 100644 demos/functional/templates/ui.sortable.html
 create mode 100644 demos/functional/templates/ui.tabs.ex1.html
 create mode 100644 demos/functional/templates/ui.tabs.html
 create mode 100644 demos/functional/templates/ui.tabs.php

(limited to 'demos/functional/templates')

diff --git a/demos/functional/templates/images/P1010020.JPG b/demos/functional/templates/images/P1010020.JPG
new file mode 100644
index 000000000..cba634588
Binary files /dev/null and b/demos/functional/templates/images/P1010020.JPG differ
diff --git a/demos/functional/templates/images/P1010036.JPG b/demos/functional/templates/images/P1010036.JPG
new file mode 100644
index 000000000..1d062b364
Binary files /dev/null and b/demos/functional/templates/images/P1010036.JPG differ
diff --git a/demos/functional/templates/images/P1010039.JPG b/demos/functional/templates/images/P1010039.JPG
new file mode 100644
index 000000000..2d0b6c726
Binary files /dev/null and b/demos/functional/templates/images/P1010039.JPG differ
diff --git a/demos/functional/templates/images/P1010044.JPG b/demos/functional/templates/images/P1010044.JPG
new file mode 100644
index 000000000..9d0cccf86
Binary files /dev/null and b/demos/functional/templates/images/P1010044.JPG differ
diff --git a/demos/functional/templates/images/P1010050.JPG b/demos/functional/templates/images/P1010050.JPG
new file mode 100644
index 000000000..89a36b78b
Binary files /dev/null and b/demos/functional/templates/images/P1010050.JPG differ
diff --git a/demos/functional/templates/images/P1010055.JPG b/demos/functional/templates/images/P1010055.JPG
new file mode 100644
index 000000000..889b4e67d
Binary files /dev/null and b/demos/functional/templates/images/P1010055.JPG differ
diff --git a/demos/functional/templates/images/P1010058.JPG b/demos/functional/templates/images/P1010058.JPG
new file mode 100644
index 000000000..6a83a628b
Binary files /dev/null and b/demos/functional/templates/images/P1010058.JPG differ
diff --git a/demos/functional/templates/images/P1010059.JPG b/demos/functional/templates/images/P1010059.JPG
new file mode 100644
index 000000000..6aac87261
Binary files /dev/null and b/demos/functional/templates/images/P1010059.JPG differ
diff --git a/demos/functional/templates/images/P1010061.JPG b/demos/functional/templates/images/P1010061.JPG
new file mode 100644
index 000000000..bfe698e86
Binary files /dev/null and b/demos/functional/templates/images/P1010061.JPG differ
diff --git a/demos/functional/templates/images/P1010063.JPG b/demos/functional/templates/images/P1010063.JPG
new file mode 100644
index 000000000..88c22e021
Binary files /dev/null and b/demos/functional/templates/images/P1010063.JPG differ
diff --git a/demos/functional/templates/images/Thumbs.db b/demos/functional/templates/images/Thumbs.db
new file mode 100644
index 000000000..45328e384
Binary files /dev/null and b/demos/functional/templates/images/Thumbs.db differ
diff --git a/demos/functional/templates/images/puppy.jpg b/demos/functional/templates/images/puppy.jpg
new file mode 100644
index 000000000..df6db4e9b
Binary files /dev/null and b/demos/functional/templates/images/puppy.jpg differ
diff --git a/demos/functional/templates/ui.accordion.data.html b/demos/functional/templates/ui.accordion.data.html
new file mode 100644
index 000000000..79b1aa6d6
--- /dev/null
+++ b/demos/functional/templates/ui.accordion.data.html
@@ -0,0 +1,35 @@
+<ul id="accordionDemo" class="ui-accordion-container" style="width: 200px; height: 450px;">
+	<li>
+		<span class="ui-accordion-left"></span>
+		<a href='#' class="ui-accordion-link">
+			Test 1
+			<span class="ui-accordion-right"></span>
+		</a>
+		<div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</div>
+	</li>
+	<li>
+		<span class="ui-accordion-left"></span>
+		<a href='#' class="ui-accordion-link">Test 2<span class="ui-accordion-right"></span></a>
+		<div  class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+		</div>
+	</li>
+	<li>
+		<span class="ui-accordion-left"></span>
+		<a href='#' class="ui-accordion-link">Test 3<span class="ui-accordion-right"></span></a>
+		<div  class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+		</div>
+	</li>
+	<li>
+		<span class="ui-accordion-left"></span>
+		<a href='#' class="ui-accordion-link">Test 4<span class="ui-accordion-right"></span></a>
+		<div  class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+		</div>
+	</li>
+	<li>
+		<span class="ui-accordion-left"></span>
+		<a href='#' class="ui-accordion-link">Test 5<span class="ui-accordion-right"></span></a>
+		<div  class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+		</div>
+	</li>
+</ul>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.accordion.html b/demos/functional/templates/ui.accordion.html
new file mode 100644
index 000000000..57191bf04
--- /dev/null
+++ b/demos/functional/templates/ui.accordion.html
@@ -0,0 +1,33 @@
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Accordion Demos',
+
+		desc: 'Simple accordion',
+
+		demos: [
+
+			{
+				title: 'Simple accordion',
+				html: { url: 'templates/ui.accordion.data.html' },
+				destroy: '$("#accordionDemo").accordion("destroy");',
+
+				options: [
+					{ desc: 'Simple Accordion Mouse over', source: '$("#accordionDemo").accordion({event: "mouseover"});' },
+					{ desc: 'Simple Accordion', source: '$("#accordionDemo").accordion();' }
+				]
+			}
+		]
+
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.draggable.html b/demos/functional/templates/ui.draggable.html
new file mode 100644
index 000000000..94aca5774
--- /dev/null
+++ b/demos/functional/templates/ui.draggable.html
@@ -0,0 +1,85 @@
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Draggable Demos',
+
+		demos: [
+
+			{
+				title: 'Simple image drag',
+				desc: 'You also can make images draggable!',
+				html: '<img id="dragImage" src="templates/images/puppy.jpg" style="width: 228px; height:157px;">',
+				destroy: '$("#dragImage").draggable("destroy");',
+
+				options: [
+					{	desc: 'Using a helper clone',	source: '$("#dragImage").draggable({ helper: "clone" });' },
+					{	desc: 'Simple Drag',	source: '$("#dragImage").draggable();' },
+					{	desc: 'Axis x',	source: '$("#dragImage").draggable({ axis: "x" });' },
+					{	desc: 'Axis y',	source: '$("#dragImage").draggable({ axis: "y" });' },
+					{	desc: 'Axis x, Change cursor',	source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' },
+					{	desc: 'Cursor position [top/left]',	source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' },
+					{	desc: 'Cursor position [right/bottom]',	source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' },
+					{	desc: 'Drag on a Grid',	source: '$("#dragImage").draggable({ grid: [50, 50] });' },
+					{	desc: 'Change the opacity',	source: '$("#dragImage").draggable({ opacity: 0.40 });' },
+					{	desc: 'Drag and Revert to the original position',	source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' }
+				]
+			},
+
+			{
+				title: 'Drag div element',
+				desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!',
+				html: '<div id="divDrag" class="draggable">Drag me</div><br>',
+				destroy: '$("#divDrag").draggable("destroy");',
+				options: [
+					{	desc: 'Simple Drag',	source: '$("#divDrag").draggable();' },
+					{	desc: 'Dragging elements in a Region',	source: '$("#divDrag").draggable({ containment: "parent" });' },
+					{	desc: 'Axis x',	source: '$("#divDrag").draggable({ axis: "x" });' },
+					{	desc: 'Axis y',	source: '$("#divDrag").draggable({ axis: "y" });' },
+					{	desc: 'Axis x, Change cursor',	source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' },
+					{	desc: 'Cursor position [top/left]',	source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' },
+					{	desc: 'Cursor position [right/bottom]',	source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' },
+					{	desc: 'Drag on a Grid',	source: '$("#divDrag").draggable({ grid: [50, 50] });' },
+					{	desc: 'Using a helper clone',	source: '$("#divDrag").draggable({ helper: "clone" });' },
+					{	desc: 'Change the opacity',	source: '$("#divDrag").draggable({ opacity: 0.40 });' },
+					{	desc: 'Drag and Revert to the original position',	source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' }
+				]
+			},
+
+			{
+				title: 'Drag with a handle',
+				desc: 'Drag element by a handle.',
+				html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>',
+				destroy: '$("#draggable-handle-div").draggable("destroy");',
+
+				options: [
+					{	desc: 'Drag using a handle',	source: '$("#draggable-handle-div").draggable({ handle: "div" });' },
+					{	desc: 'Drag using a handle with a helper',	source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' }
+				]
+			},
+
+			{
+				title: 'Drag prevention for pre-defined elements',
+				desc: 'You can change elements to not drag the parent.',
+				html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 90px; font-size: 10px;" /></div>',
+				destroy: '$("#draggable-dragPrevention").draggable("destroy");',
+
+				options: [
+					{	desc: 'Drag using a handle',	source: '$("#draggable-dragPrevention").draggable({ dragPrevention: "a,input,textarea" });' },
+					{	desc: 'Drag using a handle with a helper',	source: '$("#draggable-dragPrevention").draggable({ helper: "clone", dragPrevention: "a,input,textarea" });' }
+				]
+			}
+
+		]
+
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.droppable.html b/demos/functional/templates/ui.droppable.html
new file mode 100644
index 000000000..fa9d7249a
--- /dev/null
+++ b/demos/functional/templates/ui.droppable.html
@@ -0,0 +1,87 @@
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Doppable Demos',
+
+		demos: [
+
+			{
+				title: 'Droppable',
+				desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
+				html: { url: 'templates/ui.droppable.photos.html' },
+				destroy: '$(".droppable-photos-container").droppable("destroy");',
+				options: [
+					{
+						desc: 'Photo manager',
+						source: '$(".droppable-photos-container").droppable({ accept: ".img_content", drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } });'
+					}
+				]
+			},
+
+			{
+				title: 'Droppable',
+				desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
+				html: '<div class="block">.block</div><div class="draggable red">.red</div><div class="draggable green">.green</div><div class="drop">Drop on me!<br><br></div>',
+				destroy: '$(".drop").droppable("destroy");',
+				options: [
+					{
+						desc: 'Accept all, Active Class',
+						source: '$(".drop").droppable({ accept: ".block, .red, .green", activeClass: "droppable-active", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Only accept .block',
+						source: '$(".drop").droppable({ accept: ".block", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Only accept .red',
+						source: '$(".drop").droppable({ accept: ".red", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Only accept .green',
+						source: '$(".drop").droppable({ accept: ".green", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Accept all, Hover Class',
+						source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "droppable-hover", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Accept all, Mouse tolerance',
+						source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "pointer", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Accept all, Touch tolerance',
+						source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "touch", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
+					},
+					{
+						desc: 'Accept all, Activate/Deactivate callbacks',
+						source: '$(".drop").droppable({ accept: ".block, .red, .green, .red, .green", activate: function(ev, ui) { $(this).append("Activate! "); }, deactivate: function(ev, ui) { $(this).append("Deactivate! "); }});'
+					},
+					{
+						desc: 'Accept all, Over/Out callbacks',
+						source: '$(".drop").droppable({ accept: ".block, .red, .green", over: function(ev, ui) { $(this).append("Over! "); }, out: function(ev, ui) { $(this).append("Out! "); }});'
+					}
+				]
+			}
+		],
+
+		onRenderEnd: function() {
+			$(".block, .green, .red").draggable({helper: "clone"});
+
+			$('ul.droppable-gallery img').addClass('img_content').draggable({
+				helper: 'clone'
+			});
+
+		}
+
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.droppable.photos.html b/demos/functional/templates/ui.droppable.photos.html
new file mode 100644
index 000000000..deab134dc
--- /dev/null
+++ b/demos/functional/templates/ui.droppable.photos.html
@@ -0,0 +1,17 @@
+<div id="droppablePhotos" style="min-height: 130px; min-height:130px; height:auto !important;  zoom:1;">
+
+	<ul class="droppable-gallery">
+			<li class="droppable-img-content">
+				<img src="templates/images/P1010020.JPG" alt="Tatry 1" title="Drag me!" />
+			</li>
+			<li class="droppable-img-content">
+				<img src="templates/images/P1010039.JPG" alt="Tatry 3" title="Drag me!" />
+			</li>
+			<li class="droppable-img-content">
+				<img src="templates/images/P1010044.JPG" alt="Tatry 4" title="Drag me!" />
+			</li>
+	</ul>
+	
+	<div class="droppable-photos-container" style="text-align: center;">Drop here!</div>
+
+</div>
\ No newline at end of file
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
diff --git a/demos/functional/templates/ui.selectable.data.html b/demos/functional/templates/ui.selectable.data.html
new file mode 100644
index 000000000..ad60e0456
--- /dev/null
+++ b/demos/functional/templates/ui.selectable.data.html
@@ -0,0 +1,8 @@
+<ul id="selectable-example" style="list-style:none;  cursor: default;">
+	<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>MacBook Pro</li>
+	<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>iMac</li>
+	<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>MacBook</li>
+	<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Time Capsule</li>
+	<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Apple Cinema Display</li>
+	<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Mac mini</li>
+</ul>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.selectable.html b/demos/functional/templates/ui.selectable.html
new file mode 100644
index 000000000..a7ab5cf9a
--- /dev/null
+++ b/demos/functional/templates/ui.selectable.html
@@ -0,0 +1,31 @@
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Selectable Demos',
+
+		demos: [
+
+			{
+				title: 'Selectable',
+				desc: 'With few lines of code you could have selectable elements. You can try more options on the fly!',
+				html: { url: 'templates/ui.selectable.data.html' },
+				destroy: '$("#selectable-example").selectable("destroy");',
+				options: [
+					{	desc: 'Make a simple selectable list', source: '$("#selectable-example").selectable();' },
+					{	desc: 'Tolerance touch', source: '$("#selectable-example").selectable({ tolerance: "touch" });' }
+				]
+			}
+		]
+
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.slider.html b/demos/functional/templates/ui.slider.html
new file mode 100644
index 000000000..c05cd605e
--- /dev/null
+++ b/demos/functional/templates/ui.slider.html
@@ -0,0 +1,44 @@
+<script type="text/javascript">
+
+	var model = {
+		
+		renderAt: '#containerDemo',
+
+		title: 'Slider Demos',
+		
+		demos: [
+
+			{
+				title: 'Simple slider',
+				desc: 'With few lines of code you could build a slider. You can try more options on the fly!',
+				html: '<div id="slider3"><div class="ui-slider-handle"></div></div>',
+				destroy: '$("#slider3").sortable("destroy");',
+				options: [
+					{
+						desc: 'Make a simple slider',
+						source:	'$("#slider3").slider();'
+					}
+				]
+			},
+			
+			{
+				title: 'Multiple slides',
+				desc: 'You can also have multiples slides.',
+				html: '<div id="slider1" class="ui-slider-2"><div class="ui-slider-handle"></div><div class="ui-slider-handle" style="left:100px"></div></div>',
+				destroy: '$("#slider1").slider("destroy");',
+				options: [
+					{ desc: 'Multiple slides', source:	'$("#slider1").slider();'	}
+					//, { desc: 'Multiple slides with range', source:	'$("#slider1").slider({ range: true });'	}
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.sortable.ex1.html b/demos/functional/templates/ui.sortable.ex1.html
new file mode 100644
index 000000000..4d3cdbac9
--- /dev/null
+++ b/demos/functional/templates/ui.sortable.ex1.html
@@ -0,0 +1,40 @@
+<div class="sortable-container">
+	
+	<div id="example1">
+	
+		<button onclick="$('#selectedUsers').sortable('enable')">Enable</button>
+		<button onclick="$('#selectedUsers').sortable('disable')">Disable</button>
+		<button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button>
+		<button onclick="alert($('#selectedUsers').sortable('toArray'))">ID's to Array!</button>
+		
+		<br><br>
+		
+		<div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;">
+		
+			<div style="float: left;">
+				Selected users
+				<ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
+					<li id='user_Susan'>Susan</li>
+					<li id='user_Beth'>Beth</li>
+					<li id='user_Bob'>Bob</li>
+					<li id='user_Edward'>Edward</li>
+					<li id='user_Kate'>Kate</li>
+				</ul>
+			</div>
+			
+			<div style="float: left; margin-left: 50px;">
+				User list
+				<ul id="userList" style="cursor: hand; cursor: pointer;">
+					<li id='user_Jack'>Jack</li>
+					<li id='user_John'>John</li>
+					<li id='user_Marry'>Marry</li>
+					<li id='user_Claire'>Claire</li>
+					<li id='user_Daniel'>Daniel</li>
+				</ul>
+			</div>
+		
+			<br style="clear: both;">
+		
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.sortable.ex3.html b/demos/functional/templates/ui.sortable.ex3.html
new file mode 100644
index 000000000..1d460fd01
--- /dev/null
+++ b/demos/functional/templates/ui.sortable.ex3.html
@@ -0,0 +1,19 @@
+<div class="sortable-container">
+	
+	<div id="example3">
+		
+		<div style="min-height: 50px; min-height:50px; height:auto !important;">
+		
+			<ul id="placeholderSortable" style="list-style-position: inside; height: 30px; cursor: hand; cursor: pointer;">
+				<li id='user_Jack' style="float: left;">Jack</li>
+				<li id='user_John' style="float: left;">John</li>
+				<li id='user_Marry' style="float: left;">Marry</li>
+				<li id='user_Claire' style="float: left;">Claire</li>
+				<li id='user_Daniel' style="float: left;">Daniel</li>
+			</ul>
+		
+		</div>
+		
+	</div>
+		
+</div>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.sortable.html b/demos/functional/templates/ui.sortable.html
new file mode 100644
index 000000000..55ea4b7a6
--- /dev/null
+++ b/demos/functional/templates/ui.sortable.html
@@ -0,0 +1,55 @@
+<script type="text/javascript">
+
+	var model = {
+		
+		onRenderEnd: function() {
+			
+			$.ui.disableSelection($('#sortable-ex').get(0));
+			
+		},
+		
+		renderAt: '#containerDemo',
+
+		title: 'Sortable Demos',
+		
+		demos: [
+
+			{
+				
+				title: 'Sortable',
+				desc: 'With few lines of code you could have sortable elements. You can try more options on the fly!',
+				html: { url: 'templates/ui.sortable.ex1.html' },
+				destroy: '$("#selectedUsers").sortable("destroy");',
+				options: [
+					{
+						desc: 'Make a simple sortable list',
+						source:
+							'$("#selectedUsers").sortable({ connectWith: ["#userList"] }); ' +
+							'$("#userList").sortable({ connectWith: ["#selectedUsers"] });'
+					}
+				]
+			},
+
+			{
+				title: 'Sortable',
+				desc: 'Floating, with defined placeholder class',
+				html: { url: 'templates/ui.sortable.ex3.html' },
+				destroy: '$("#placeholderSortable").sortable("destroy");',
+				options: [
+					{
+						desc: 'Floating, with defined placeholder class',
+						source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", revert: true });'
+					}
+				]
+			}
+
+		]
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.tabs.ex1.html b/demos/functional/templates/ui.tabs.ex1.html
new file mode 100644
index 000000000..12d9740ba
--- /dev/null
+++ b/demos/functional/templates/ui.tabs.ex1.html
@@ -0,0 +1,35 @@
+<div id="tabsEx1">
+	
+		<input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#appended-tab', 'New Tab');" value="Add new tab">
+		<input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);" value="Insert tab">
+		<input type="button" onclick="$('#tabsEx1 > ul').tabs('disable', 1);" value="Disable tab 2">
+		<input type="button" onclick="$('#tabsEx1 > ul').tabs('enable', 1);" value="Enable tab 2">
+		<input type="button" onclick="$('#tabsEx1 > ul').tabs('select', 2);" value="Select tab 3">
+		
+		<br><br>
+	
+    <ul style="height: 30px;">
+        <li><a href="#fragment-1"><span>One</span></a></li>
+        <li><a href="#fragment-2"><span>Two</span></a></li>
+        <li><a href="#fragment-3"><span>Three</span></a></li>
+    </ul>
+    <div id="fragment-1">
+        <p>First tab is active by default</p>
+    </div>
+    <div id="fragment-2">
+			<p><b>Second tab is active</b></p><br>
+      <p>Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p><br>
+      <ol>
+          <li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li>
+          <li>Same if you use the cookie option to save the latest selected tab in.</li>
+          <li>Last not least you can set the selected tab by attaching the selected tab class
+          class (default: "ui-tabs-selected") to one of the <code>li</code> elements
+          representing a single tab.</li>
+      </ol>
+    </div>
+    <div id="fragment-3">
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+    </div>
+</div>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.tabs.html b/demos/functional/templates/ui.tabs.html
new file mode 100644
index 000000000..902ae91bb
--- /dev/null
+++ b/demos/functional/templates/ui.tabs.html
@@ -0,0 +1,54 @@
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Tabs Demos',
+
+		demos: [
+
+			{
+				title: 'Simple Tabs',
+				desc: 'With few lines of code you could make tabs. You can try more options on the fly!',
+				html: { url: 'templates/ui.tabs.ex1.html' },
+				destroy: '$("tabsEx1 > ul").tabs("destroy");',
+				options: [
+					{
+						desc: 'First tab active by default',
+						source: '$("#tabsEx1 > ul").tabs();'
+					},
+					{
+						desc: 'Start With Custom Tab',
+						source: '$("#tabsEx1 > ul").tabs({selected:1});'
+					},
+					{
+						desc: 'Use a slide effect to switch tabs',
+						source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle" } });'
+					},
+					{
+						desc: 'Use a fade effect to switch tabs',
+						source: '$("#tabsEx1 > ul").tabs({ fx: { opacity: "toggle" } });'
+					},
+					{
+						desc: 'Use a combined slide and fade effect to switch tabs',
+						source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle", opacity: "toggle" } });'
+					},
+					{
+						desc: 'Define event to switch tabs (mouseover)',
+						source: '$("#tabsEx1 > ul").tabs({  event: "mouseover" });'
+					}
+				]
+			}
+
+		]
+
+	};
+
+	$(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
\ No newline at end of file
diff --git a/demos/functional/templates/ui.tabs.php b/demos/functional/templates/ui.tabs.php
new file mode 100644
index 000000000..cf4e89e81
--- /dev/null
+++ b/demos/functional/templates/ui.tabs.php
@@ -0,0 +1,88 @@
+<style>
+
+#divTabs, #divAddTabs {
+	height:30px;
+}
+
+</style>
+
+<div id="containerDemo"></div>
+
+<script type="text/javascript">
+
+	var model = {
+
+		renderAt: '#containerDemo',
+
+		title: 'Tabs Demos',
+
+		demos: [
+
+			{
+				title: 'Simple Tabs',
+				html: ['<div><ul id="divTabs" class="flora">',
+							'<li><a href="#tabs-fragment-1"><span>One</span></a></li>',
+                			'<li><a href="#tabs-fragment-2"><span>Two</span></a></li>',
+                			'<li><a href="#tabs-fragment-3"><span>Three</span></a></li>',
+            			'</ul>',
+            			'<div id="tabs-fragment-1">',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+            			'</div>',
+            			'<div id="tabs-fragment-2">',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+							'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+            			'</div>',
+            			'<div id="tabs-fragment-3">',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+							'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+            			'</div></div>'].join(''),
+				destroy: '$("#divTabs").tabs("destroy");',
+
+				options: [
+					{	desc: 'Simple Tabs',	source: '$("#divTabs").tabs();' },
+					{	desc: 'Simple Cloned Tabs',	source: '$("#divTabs").clone().tabs();' },
+                    {	desc: 'Simple Empty Tabs',	source: '$("#divTabs").tabs();' },
+                    {	desc: 'Simple Detached Tabs',	source: '$("<div/>").tabs();' }
+				]
+			},
+			{
+				title: 'Add A Tab',
+				html: ['<div><ul id="divAddTabs" class="flora">',
+							'<li><a href="#addtabs-fragment-1"><span>One</span></a></li>',
+                			'<li><a href="#addtabs-fragment-2"><span>Two</span></a></li>',
+                			'<li><a href="#addtabs-fragment-3"><span>Three</span></a></li>',
+            			'</ul>',
+            			'<div id="addtabs-fragment-1">',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+            			'</div>',
+            			'<div id="addtabs-fragment-2">',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+            			'</div>',
+            			'<div id="addtabs-fragment-3">',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+                			'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
+            			'</div></div>'].join(''),
+				destroy: '$("#divAddTabs").tabs("destroy");',
+
+				options: [
+					{	desc: 'Simple Dialog',	source: '$("#divAddTabs").tabs("add", "#", "Added");' }
+				]
+			},
+		]
+
+	};
+
+	$(window).load(function(){
+
+		uiRenderDemo(model);
+
+	});
+
+</script>
-- 
cgit v1.2.3