jquery-ui/demos/functional/templates/ui.magnifier.html

52 lines
2.7 KiB
HTML
Raw Normal View History

2008-09-20 17:42:04 +00:00
<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;">&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>',
destroy: '$("#magnifier3").magnifier("destroy");',
options: [
{ desc: 'Overlap option', source: '$("#magnifier3").magnifier({overlap:true});' }
]
}
]
};
$(function(){
uiRenderDemo(model);
});
</script>