← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/demos/functional/templates/ui.effects.general.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.6rc2/demos/functional/templates/ui.effects.general.html
1
 
<script type="text/javascript">
2
 
 
3
 
        var model = {
4
 
 
5
 
                renderAt: '#containerDemo',
6
 
 
7
 
                title: 'General Effects',
8
 
 
9
 
                demos: [
10
 
 
11
 
                        {
12
 
                                title: 'Bounce',
13
 
                                desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.',
14
 
                                html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' +
15
 
                                        '<div style="height: 108px;"><img id="bounce" src="templates/images/P1010036.JPG"/></div>',
16
 
                                destroy: '$("#doBounce").unbind();',
17
 
 
18
 
                                options: [
19
 
                                        {       desc: 'Bounce defaults',        source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {}, 500); });' },
20
 
                                        {       desc: 'Bounce three times',     source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 3}, 500); });' },
21
 
                                        {       desc: 'Bounce once',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 1}, 500); });' },
22
 
                                        {       desc: 'Bounce down',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "down"}); });' },
23
 
                                        {       desc: 'Bounce left',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "left"}); });' },
24
 
                                        {       desc: 'Bounce right',   source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "right"}); });' },
25
 
                                        {       desc: 'Bounce to height 50',    source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {distance: 50}); });' },
26
 
                                        {       desc: 'Bounce and show/hide',   source: '$("#doBounce").click(function() { $("#bounce").toggle("bounce", {times: 3}, 500); });' }
27
 
                                ]
28
 
                        },
29
 
 
30
 
                        {
31
 
                                title: 'Highlight',
32
 
                                desc: 'Highlight an element by fading its background color from another color back to its original.',
33
 
                                html: '<button id="doHighlight" type="button">Highlight</button><br/><br/>\n' +
34
 
                                        '<div id="highlight" style="width: 144px; height: 108px; background-color: #ccffff; text-align: center;"><br/><br/>\n' +
35
 
                                        'This is an important announcement!</div>',
36
 
                                destroy: '$("#doHighlight").unbind();',
37
 
 
38
 
                                options: [
39
 
                                        {       desc: 'Highlight defaults (yellow)',    source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 800); });' },
40
 
                                        {       desc: 'Highlight to red',       source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 800); });' },
41
 
                                        {       desc: 'Highlight to black',     source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 800); });' }
42
 
                                ]
43
 
                        },
44
 
 
45
 
                        {
46
 
                                title: 'Pulsate',
47
 
                                desc: 'Pulsate an element by changing its opacity.',
48
 
                                html: '<button id="doPulsate" type="button">Pulsate</button><br/><br/>\n' +
49
 
                                        '<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>',
50
 
                                destroy: '$("#doPulsate").unbind();',
51
 
 
52
 
                                options: [
53
 
                                        {       desc: 'Pulsate defaults (5 times)',     source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {}, 500); });' },
54
 
                                        {       desc: 'Pulsate 3 times',        source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 3}, 500); });' },
55
 
                                        {       desc: 'Pulsate once',   source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 1}, 1000); });' },
56
 
                                        {       desc: 'Pulsate 3 times and show/hide',  source: '$("#doPulsate").click(function() { $("#pulsate").toggle("pulsate", {times: 3}, 500); });' }
57
 
                                ]
58
 
                        },
59
 
 
60
 
                        {
61
 
                                title: 'Scale',
62
 
                                desc: 'Scales an element up or down by a percentage factor.',
63
 
                                html: '<button id="doScale" type="button">Scale</button> \n' +
64
 
                                        '<button onclick="$(\'#scale\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' +
65
 
                                        '<div style="height: 108px;" type="button"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
66
 
                                destroy: '$("#doScale").unbind();',
67
 
 
68
 
                                options: [
69
 
                                        {       desc: 'Scale to 0%',    source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 800); });' },
70
 
                                        {       desc: 'Scale to 50%',   source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 800); });' },
71
 
                                        {       desc: 'Scale to 200%',  source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 800); });' },
72
 
                                        {       desc: 'Scale vertically only',  source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 800); });' },
73
 
                                        {       desc: 'Scale horizontally only',        source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 800); });' },
74
 
                                        {       desc: 'Scale from middle-center',       source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 800); });' },
75
 
                                        {       desc: 'Scale from bottom-right',        source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 800); });' }
76
 
                                ]
77
 
                        },
78
 
                        
79
 
                        {
80
 
                                title: 'Size',
81
 
                                desc: 'Changes the size of an element by specifying a width and height.',
82
 
                                html: '<button id="doSize" type="button">Size</button> \n' +
83
 
                                        '<button onclick="$(\'#size\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' +
84
 
                                        '<div style="height: 108px;" type="button"><img id="size" src="templates/images/P1010063.JPG"/></div>',
85
 
                                destroy: '$("#doSize").unbind();',
86
 
 
87
 
                                options: [
88
 
                                        {       desc: 'Size to 75x200', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 800); });' },
89
 
                                        {       desc: 'Size to 200x75', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 800); });' },
90
 
                                        {       desc: 'Size (125x210) from middle-center',      source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 800); });' },
91
 
                                        {       desc: 'Size (210x125) from bottom-right',       source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 800); });' }
92
 
                                ]
93
 
                        },
94
 
 
95
 
                        {
96
 
                                title: 'Shake',
97
 
                                desc: 'Shake an element around.',
98
 
                                html: '<button id="doShake" type="button">Shake</button><br/><br/>\n' +
99
 
                                        '<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>',
100
 
                                destroy: '$("#doShake").unbind();',
101
 
 
102
 
                                options: [
103
 
                                        {       desc: 'Shake defaults', source: '$("#doShake").click(function() { $("#shake").effect("shake", {}, 300); });' },
104
 
                                        {       desc: 'Shake 5 times',  source: '$("#doShake").click(function() { $("#shake").effect("shake", {times: 5}, 250); });' },
105
 
                                        {       desc: 'Shake right',    source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "right"}, 250); });' },
106
 
                                        {       desc: 'Shake up',       source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "up"}, 250); });' },
107
 
                                        {       desc: 'Shake down',     source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "down"}, 250); });' },
108
 
                                        {       desc: 'Shake by 50px',  source: '$("#doShake").click(function() { $("#shake").effect("shake", {distance: 50}, 250); });' }
109
 
                                ]
110
 
                        },
111
 
 
112
 
                        {
113
 
                                title: 'Transfer',
114
 
                                desc: 'Transfer the outline of one element to another.',
115
 
                                html: '<button id="doTransfer" type="button">Transfer</button><br/><br/>\n' +
116
 
                                        '<div style="height: 108px;"><img id="transfer" src="templates/images/P1010044.JPG"/></div>\n' +
117
 
                                        '<div id="target" style="margin: 20px 0px 0px 36px; width: 72px; height: 54px; border: 1px solid black;"></div>\n' +
118
 
                                        '<style type="text/css">\n' +
119
 
                                        '.ui-effects-transfer { border: 1px solid maroon; }\n' +
120
 
                                        '.transferring { background-color: red; opacity: 0.5; }\n' +
121
 
                                        '</style>',
122
 
                                destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");',
123
 
 
124
 
                                options: [
125
 
                                        {       desc: 'Transfer default',       source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 800); });' },
126
 
                                        {       desc: 'Transfer with extra class',      source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 800); });' }
127
 
                                ]
128
 
                        }
129
 
                        
130
 
                ]
131
 
 
132
 
        };
133
 
 
134
 
        $(function(){
135
 
 
136
 
                uiRenderDemo(model);
137
 
 
138
 
        });
139
 
 
140
 
</script>
 
 
b'\\ No newline at end of file'