diff options
Diffstat (limited to 'demos/functional/templates/ui.effects.showhide.html')
| -rw-r--r-- | demos/functional/templates/ui.effects.showhide.html | 86 |
1 files changed, 43 insertions, 43 deletions
diff --git a/demos/functional/templates/ui.effects.showhide.html b/demos/functional/templates/ui.effects.showhide.html index a4dde6553..af0295a04 100644 --- a/demos/functional/templates/ui.effects.showhide.html +++ b/demos/functional/templates/ui.effects.showhide.html @@ -11,112 +11,112 @@ { title: 'Blind', desc: 'Gradually show or hide an element.', - html: '<button id="doBlind">Toggle</button><br/>\n' + + html: '<button id="doBlind" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="blindfx" style="width: 144px; height: 108px;" src="templates/images/P1010020.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doBlind").unbind();', options: [ - { desc: 'Vertical blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 2000); });' }, - { desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 2000); });' } + { desc: 'Vertical blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 800); });' }, + { desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 800); });' } ] }, { title: 'Clip', desc: 'Gradually show or hide an element by expanding from or to the center.', - html: '<button id="doClip">Toggle</button><br/>\n' + + html: '<button id="doClip" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="clipfx" style="width: 144px; height: 108px;" src="templates/images/P1010039.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doClip").unbind();', options: [ - { desc: 'Vertical clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 2000); });' }, - { desc: 'Horizontal clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 2000); });' } + { desc: 'Vertical clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 800); });' }, + { desc: 'Horizontal clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 800); });' } ] }, { 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' + + html: '<button id="doDrop" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="dropfx" style="width: 144px; height: 108px;" src="templates/images/P1010044.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doDrop").unbind();', options: [ - { desc: 'Drop left', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 2000); });' }, - { desc: 'Drop right', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 2000); });' }, - { desc: 'Drop up', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 2000); });' }, - { desc: 'Drop down', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 2000); });' } + { desc: 'Drop left', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 800); });' }, + { desc: 'Drop right', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 800); });' }, + { desc: 'Drop up', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 800); });' }, + { desc: 'Drop down', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 800); });' } ] }, { 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' + + html: '<button id="doExplode" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="explodefx" style="width: 144px; height: 108px;" src="templates/images/P1010050.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doExplode").unbind();', options: [ - { desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 2000); });' }, - { desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 2000); });' }, - { desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 2000); });' } + { desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 800); });' }, + { desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 800); });' }, + { desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 800); });' } ] }, { 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' + + html: '<button id="doFold" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="foldfx" style="width: 144px; height: 108px;" src="templates/images/P1010055.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doFold").unbind();', options: [ - { desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 2000); });' }, - { desc: 'Fold to 30', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 2000); });' }, - { desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 2000); });' }, - { desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 2000); });' }, - { desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 2000); });' } + { desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 800); });' }, + { desc: 'Fold to 30', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 800); });' }, + { desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 800); });' }, + { desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 800); });' }, + { desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 800); });' } ] }, { 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' + + html: '<button id="doPuff" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="pufffx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="pufffx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="pufffx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doPuff").unbind();', options: [ - { desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 2000); });' }, - { desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 2000); });' } + { desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 800); });' }, + { desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 800); });' } ] }, - + { title: 'Scale', desc: 'Grow/Shrink an element.', - html: '<button id="doScale">Toggle</button><br/>\n' + + html: '<button id="doScale" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="scalefx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doScale").unbind();', options: [ - { desc: 'Scale defaults', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 2000); });' }, - { desc: 'Scale from/to top-left', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["top","left"]}, 2000); });' }, - { desc: 'Scale from/to bottom-right', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["bottom","right"]}, 2000); });' }, + { desc: 'Scale defaults', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 800); });' }, + { desc: 'Scale from/to top-left', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["top","left"]}, 800); });' }, + { desc: 'Scale from/to bottom-right', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["bottom","right"]}, 800); });' }, ] }, @@ -124,20 +124,20 @@ { title: 'Slide', desc: 'Slide an element out of or into the viewport.', - html: '<button id="doSlide">Toggle</button><br/>\n' + + html: '<button id="doSlide" type="button">Toggle</button><br/><br/>\n' + '<ul><li style="float: left; width: 144px; height: 108px;"><img class="slidefx" style="width: 144px; height: 108px;" src="templates/images/P1010059.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' + + '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + '<div style="clear: both;"></div>', destroy: '$("#doSlide").unbind();', options: [ - { desc: 'Slide left', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 2000); });' }, - { desc: 'Slide right', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 2000); });' }, - { desc: 'Slide up', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 2000); });' }, - { desc: 'Slide down', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 2000); });' } + { desc: 'Slide left', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 800); });' }, + { desc: 'Slide right', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 800); });' }, + { desc: 'Slide up', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 800); });' }, + { desc: 'Slide down', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 800); });' } ] } - + ] }; |