mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
120 lines
5.3 KiB
HTML
120 lines
5.3 KiB
HTML
<script type="text/javascript">
|
|
|
|
var model = {
|
|
|
|
renderAt: '#containerDemo',
|
|
|
|
title: 'Show/Hide Effects',
|
|
|
|
demos: [
|
|
|
|
{
|
|
title: 'Blind',
|
|
desc: 'Gradually show or hide an element.',
|
|
html: '<button id="doBlind">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="blind" src="templates/images/P1010020.JPG"/></div>',
|
|
destroy: '$("#doBlind").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Vertical blind', source: '$("#doBlind").click(function() { $("#blind").toggle("blind", {direction: "vertical"}, 2000); });' },
|
|
{ desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $("#blind").toggle("blind", {direction: "horizontal"}, 2000); });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Clip',
|
|
desc: 'Gradually show or hide an element by expanding from or to the center.',
|
|
html: '<button id="doClip">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="clip" src="templates/images/P1010039.JPG"/></div>',
|
|
destroy: '$("#doClip").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Vertical clip', source: '$("#doClip").click(function() { $("#clip").toggle("clip", {direction: "vertical"}, 2000); });' },
|
|
{ desc: 'Horizontal clip', source: '$("#doClip").click(function() { $("#clip").toggle("clip", {direction: "horizontal"}, 2000); });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Drop',
|
|
desc: 'Gradually show or hide an element by dropping it to one side and fading it.',
|
|
html: '<button id="doDrop">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="drop" src="templates/images/P1010044.JPG"/></div>',
|
|
destroy: '$("#doDrop").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Drop left', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "left"}, 2000); });' },
|
|
{ desc: 'Drop right', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "right"}, 2000); });' },
|
|
{ desc: 'Drop up', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "up"}, 2000); });' },
|
|
{ desc: 'Drop down', source: '$("#doDrop").click(function() { $("#drop").toggle("drop", {direction: "down"}, 2000); });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Explode',
|
|
desc: 'Break an element into pieces and explode them away, or reassemble an element from pieces.',
|
|
html: '<button id="doExplode">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="explode" src="templates/images/P1010050.JPG"/></div>',
|
|
destroy: '$("#doExplode").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {}, 2000); });' },
|
|
{ desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {pieces: 4}, 2000); });' },
|
|
{ desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $("#explode").toggle("explode", {pieces: 25}, 2000); });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Fold',
|
|
desc: 'Reduce or enlarge an element partially in one direction and then fully in the other direction.',
|
|
html: '<button id="doFold">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="fold" src="templates/images/P1010055.JPG"/></div>',
|
|
destroy: '$("#doFold").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {}, 2000); });' },
|
|
{ desc: 'Fold to 30', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: 30}, 2000); });' },
|
|
{ desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: "50%"}, 2000); });' },
|
|
{ desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: 30, horizFirst: true}, 2000); });' },
|
|
{ desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $("#fold").toggle("fold", {size: "50%", horizFirst: true}, 2000); });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Puff',
|
|
desc: 'Scale an element up and fade out, or scale it down and fade in.',
|
|
html: '<button id="doPuff">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="puff" src="templates/images/P1010058.JPG"/></div>',
|
|
destroy: '$("#doPuff").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $("#puff").toggle("puff", {}, 2000); });' },
|
|
{ desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $("#puff").toggle("puff", {percent: 200}, 2000); });' }
|
|
]
|
|
},
|
|
|
|
{
|
|
title: 'Slide',
|
|
desc: 'Slide an element out of or into the viewport.',
|
|
html: '<button id="doSlide">Toggle</button><br/>\n' +
|
|
'<div style="height: 108px;"><img id="slide" src="templates/images/P1010059.JPG"/></div>',
|
|
destroy: '$("#doSlide").unbind();',
|
|
|
|
options: [
|
|
{ desc: 'Slide left', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "left"}, 2000); });' },
|
|
{ desc: 'Slide right', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "right"}, 2000); });' },
|
|
{ desc: 'Slide up', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "up"}, 2000); });' },
|
|
{ desc: 'Slide down', source: '$("#doSlide").click(function() { $("#slide").toggle("slide", {direction: "down"}, 2000); });' }
|
|
]
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
$(function(){
|
|
|
|
uiRenderDemo(model);
|
|
|
|
});
|
|
|
|
</script> |