Functional demos: magnifier and progressbar

diff --git a/demos/functional/images/clock.png b/demos/functional/images/clock.png
new file mode 100644 (file)
index 0000000..dbb57fa
Binary files /dev/null and b/demos/functional/images/clock.png differ

diff --git a/demos/functional/templates/ui.magnifier.html b/demos/functional/templates/ui.magnifier.html
new file mode 100644 (file)
index 0000000..fd701ae
--- /dev/null
+++ b/demos/functional/templates/ui.magnifier.html
@@ -0,0 +1,52 @@
+<script type="text/javascript">\r
+\r
+       var model = {\r
+               \r
+               renderAt: '#containerDemo',\r
+\r
+               title: 'Magnifier Demos',\r
+               \r
+               demos: [\r
+\r
+                       {\r
+                               title: 'Simple Magnifier',\r
+                               desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',\r
+                               html: '<div id="magnifier"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',\r
+                               destroy: '$("#magnifier").magnifier("destroy");',\r
+                               options: [\r
+                                       { desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },\r
+                                       { desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },\r
+                                       { desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }\r
+                               ]\r
+                       },\r
+\r
+                       {\r
+                               title: 'Opacity Magnifier',\r
+                               desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',\r
+                               html: '<div id="magnifier2"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div>',\r
+                               destroy: '$("#magnifier2").magnifier("destroy");',\r
+                               options: [\r
+                                       { desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }\r
+                               ]\r
+                       },\r
+\r
+                       {\r
+                               title: 'Overlap Magnifier',\r
+                               desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',\r
+                               html: '<div style="height:16px;">&nbsp;</div><div id="magnifier3"><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /><img src="images/clock.png" width="64" height="64" alt="demo image" /></div><div style="height:84px;">&nbsp;</div>',\r
+                               destroy: '$("#magnifier3").magnifier("destroy");',\r
+                               options: [\r
+                                       { desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }\r
+                               ]\r
+                       }\r
+\r
+               ]\r
+       };\r
+\r
+       $(function(){\r
+\r
+               uiRenderDemo(model);\r
+\r
+       });\r
+\r
+</script>
\ No newline at end of file

diff --git a/demos/functional/templates/ui.progressbar.html b/demos/functional/templates/ui.progressbar.html
new file mode 100644 (file)
index 0000000..af0669f
--- /dev/null
+++ b/demos/functional/templates/ui.progressbar.html
@@ -0,0 +1,35 @@
+<script type="text/javascript">\r
+\r
+       var model = {\r
+               \r
+               renderAt: '#containerDemo',\r
+\r
+               title: 'Progressbar Demos',\r
+               \r
+               demos: [\r
+\r
+                       {\r
+                               title: 'Simple Progressbar',\r
+                               desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!',\r
+                               html: '<div id="progressbar"></div>',\r
+                               destroy: '$("#progressbar").progressbar("destroy");',\r
+                               options: [\r
+                                       { desc: 'Attach a progressbar', source: '$("#progressbar").progressbar();' },\r
+                                       { desc: 'Start the progressbar', source: '$("#progressbar").progressbar("start");' },\r
+                                       { desc: 'Loop', source: '$("#progressbar").progressbar({duration:2000,wait:"loop"}).progressbar("start");' },\r
+                                       { desc: 'Callback when finish', source: '$("#progressbar").progressbar({stop:function(){alert("Finished");}}).progressbar("start");' },\r
+                                       { desc: 'Enable the progressbar', source: '$("#progressbar").progressbar("enable");' },\r
+                                       { desc: 'Disable the progressbar', source: '$("#progressbar").progressbar("disable");' }\r
+                               ]\r
+                       }\r
+\r
+               ]\r
+       };\r
+\r
+       $(function(){\r
+\r
+               uiRenderDemo(model);\r
+\r
+       });\r
+\r
+</script>
\ No newline at end of file