diff options
Diffstat (limited to 'demos/functional/templates/ui.effects.general.html')
| -rw-r--r-- | demos/functional/templates/ui.effects.general.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/demos/functional/templates/ui.effects.general.html b/demos/functional/templates/ui.effects.general.html new file mode 100644 index 000000000..f6032d7c8 --- /dev/null +++ b/demos/functional/templates/ui.effects.general.html @@ -0,0 +1,124 @@ +<script type="text/javascript"> + + var model = { + + renderAt: '#containerDemo', + + title: 'General Effects', + + demos: [ + + { + title: 'Bounce', + desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.', + html: '<button id="doBounce">Bounce</button><br/>\n' + + '<div style="height: 108px;"><img id="bounce" src="templates/images/P1010036.JPG"/></div>', + destroy: '$("#doBounce").unbind();', + + options: [ + { desc: 'Bounce defaults', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {}, 500); });' }, + { desc: 'Bounce three times', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 3}, 500); });' }, + { desc: 'Bounce once', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 1}, 500); });' }, + { desc: 'Bounce down', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "down"}); });' }, + { desc: 'Bounce left', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "left"}); });' }, + { desc: 'Bounce right', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "right"}); });' }, + { desc: 'Bounce to height 50', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {distance: 50}); });' }, + { desc: 'Bounce and show/hide', source: '$("#doBounce").click(function() { $("#bounce").toggle("bounce", {times: 3}, 500); });' } + ] + }, + + { + title: 'Highlight', + desc: 'Highlight an element by fading its background color from another color back to its original.', + html: '<button id="doHighlight">Highlight</button><br/>\n' + + '<div id="highlight" style="width: 144px; height: 108px; background-color: #ccffff; text-align: center;"><br/><br/>\n' + + 'This is an important announcement!</div>', + destroy: '$("#doHighlight").unbind();', + + options: [ + { desc: 'Highlight defaults (yellow)', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 2000); });' }, + { desc: 'Highlight to red', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 2000); });' }, + { desc: 'Highlight to black', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 2000); });' } + ] + }, + + { + title: 'Pulsate', + desc: 'Pulsate an element by changing its opacity.', + html: '<button id="doPulsate">Pulsate</button><br/>\n' + + '<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>', + destroy: '$("#doPulsate").unbind();', + + options: [ + { desc: 'Pulsate defaults (5 times)', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {}, 500); });' }, + { desc: 'Pulsate 3 times', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 3}, 500); });' }, + { desc: 'Pulsate once', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 1}, 1000); });' }, + { desc: 'Pulsate 3 times and show/hide', source: '$("#doPulsate").click(function() { $("#pulsate").toggle("pulsate", {times: 3}, 500); });' } + ] + }, + + { + title: 'Scale', + desc: 'Change the size of an element.', + html: '<button id="doScale">Scale</button> \n' + + '<button onclick="$(\'#scale\').css({width: 144, height: 108});">Reset</button><br/>\n' + + '<div style="height: 108px;"><img id="scale" src="templates/images/P1010063.JPG"/></div>', + destroy: '$("#doScale").unbind();', + + options: [ + { desc: 'Scale to 0%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 2000); });' }, + { desc: 'Scale to 50%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 2000); });' }, + { desc: 'Scale to 200%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 2000); });' }, + { desc: 'Scale vertically only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 2000); });' }, + { desc: 'Scale horizontally only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 2000); });' }, + { desc: 'Scale from middle-center', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 2000); });' }, + { desc: 'Scale from bottom-right', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 2000); });' } + ] + }, + + { + title: 'Shake', + desc: 'Shake an element around.', + html: '<button id="doShake">Shake</button><br/>\n' + + '<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>', + destroy: '$("#doShake").unbind();', + + options: [ + { desc: 'Shake defaults', source: '$("#doShake").click(function() { $("#shake").effect("shake", {}, 300); });' }, + { desc: 'Shake 5 times', source: '$("#doShake").click(function() { $("#shake").effect("shake", {times: 5}, 250); });' }, + { desc: 'Shake right', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "right"}, 250); });' }, + { desc: 'Shake up', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "up"}, 250); });' }, + { desc: 'Shake down', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "down"}, 250); });' }, + { desc: 'Shake by 50px', source: '$("#doShake").click(function() { $("#shake").effect("shake", {distance: 50}, 250); });' } + ] + }, + + { + title: 'Transfer', + desc: 'Transfer the outline of one element to another.', + html: '<button id="doTransfer">Transfer</button><br/>\n' + + '<div style="height: 108px;"><img id="transfer" src="templates/images/P1010044.JPG"/></div>\n' + + '<div id="target" style="margin: 20px 0px 0px 36px; width: 72px; height: 54px; border: 1px solid black;"></div>\n' + + '<style type="text/css">\n' + + '.ui-effects-transfer { border: 1px solid maroon; }\n' + + '.transferring { background-color: red; opacity: 0.5; }\n' + + '</style>', + destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");', + + options: [ + { desc: 'Transfer default', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 2000); });' }, + { desc: 'Transfer with extra class', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 2000); });' } + ] + } + + ] + + }; + + $(function(){ + + uiRenderDemo(model); + + }); + +</script>
\ No newline at end of file |