1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<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: 'Scales an element up or down by a percentage factor.',
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: 'Size',
desc: 'Changes the size of an element by specifying a width and height.',
html: '<button id="doSize">Size</button> \n' +
'<button onclick="$(\'#size\').css({width: 144, height: 108});">Reset</button><br/>\n' +
'<div style="height: 108px;"><img id="size" src="templates/images/P1010063.JPG"/></div>',
destroy: '$("#doSize").unbind();',
options: [
{ desc: 'Size to 75x200', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 2000); });' },
{ desc: 'Size to 200x75', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 2000); });' },
{ desc: 'Size (125x210) from middle-center', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 2000); });' },
{ desc: 'Size (210x125) from bottom-right', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 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>
|
