library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Functional demos: magnifier and progressbar

Browse Source
This commit is contained in:
Chi Cheng 2008-08-08 05:20:09 +00:00
parent 946a8c8507
commit ad78dfbafc
3 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demos/functional/images/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

52
demos/functional/templates/ui.magnifier.html Normal file
View File

@ -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;">&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>

35
demos/functional/templates/ui.progressbar.html Normal file
View File

@ -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>