diff options
Diffstat (limited to 'demos/functional/templates/ui.magnifier.html')
| -rw-r--r-- | demos/functional/templates/ui.magnifier.html | 102 |
1 files changed, 51 insertions, 51 deletions
diff --git a/demos/functional/templates/ui.magnifier.html b/demos/functional/templates/ui.magnifier.html index fd701ae3b..fddef3d6b 100644 --- a/demos/functional/templates/ui.magnifier.html +++ b/demos/functional/templates/ui.magnifier.html @@ -1,52 +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 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 |