mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
52 lines
2.7 KiB
HTML
52 lines
2.7 KiB
HTML
<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> |