diff options
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/functional/images/clock.png | bin | 0 -> 24532 bytes | |||
| -rw-r--r-- | demos/functional/templates/ui.magnifier.html | 52 | ||||
| -rw-r--r-- | demos/functional/templates/ui.progressbar.html | 35 |
3 files changed, 87 insertions, 0 deletions
diff --git a/demos/functional/images/clock.png b/demos/functional/images/clock.png Binary files differnew file mode 100644 index 000000000..dbb57fa9a --- /dev/null +++ b/demos/functional/images/clock.png diff --git a/demos/functional/templates/ui.magnifier.html b/demos/functional/templates/ui.magnifier.html new file mode 100644 index 000000000..fd701ae3b --- /dev/null +++ b/demos/functional/templates/ui.magnifier.html @@ -0,0 +1,52 @@ +<script type="text/javascript">
+
+ var model = {
+
+ renderAt: '#containerDemo',
+
+ title: 'Magnifier Demos',
+
+ demos: [
+
+ {
+ title: 'Simple Magnifier',
+ desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+ 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>',
+ destroy: '$("#magnifier").magnifier("destroy");',
+ options: [
+ { desc: 'Attach a magnifier', source: '$("#magnifier").magnifier();' },
+ { desc: 'Small magnification', source: '$("#magnifier").magnifier({magnification:1.5});' },
+ { desc: 'Disable the magnifier', source: '$("#magnifier").magnifier("disable");' }
+ ]
+ },
+
+ {
+ title: 'Opacity Magnifier',
+ desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+ 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>',
+ destroy: '$("#magnifier2").magnifier("destroy");',
+ options: [
+ { desc: 'Opacity option', source: '$("#magnifier2").magnifier({opacity:{min:0.4,max:1.0}});' }
+ ]
+ },
+
+ {
+ title: 'Overlap Magnifier',
+ desc: 'With few lines of code you could build a magnifier. You can try more options on the fly!',
+ html: '<div style="height:16px;"> </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;"> </div>',
+ destroy: '$("#magnifier3").magnifier("destroy");',
+ options: [
+ { desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
+ ]
+ }
+
+ ]
+ };
+
+ $(function(){
+
+ uiRenderDemo(model);
+
+ });
+
+</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 index 000000000..af0669f95 --- /dev/null +++ b/demos/functional/templates/ui.progressbar.html @@ -0,0 +1,35 @@ +<script type="text/javascript">
+
+ var model = {
+
+ renderAt: '#containerDemo',
+
+ title: 'Progressbar Demos',
+
+ demos: [
+
+ {
+ title: 'Simple Progressbar',
+ desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!',
+ html: '<div id="progressbar"></div>',
+ destroy: '$("#progressbar").progressbar("destroy");',
+ options: [
+ { desc: 'Attach a progressbar', source: '$("#progressbar").progressbar();' },
+ { desc: 'Start the progressbar', source: '$("#progressbar").progressbar("start");' },
+ { desc: 'Loop', source: '$("#progressbar").progressbar({duration:2000,wait:"loop"}).progressbar("start");' },
+ { desc: 'Callback when finish', source: '$("#progressbar").progressbar({stop:function(){alert("Finished");}}).progressbar("start");' },
+ { desc: 'Enable the progressbar', source: '$("#progressbar").progressbar("enable");' },
+ { desc: 'Disable the progressbar', source: '$("#progressbar").progressbar("disable");' }
+ ]
+ }
+
+ ]
+ };
+
+ $(function(){
+
+ uiRenderDemo(model);
+
+ });
+
+</script>
\ No newline at end of file |
