1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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>
|
