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
141
142
143
144
145
146
147
148
149
150
151
|
<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" 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.</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"}, 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" 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.</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"}, 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" 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.</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"}, 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" 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.</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", {}, 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" 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.</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", {}, 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" 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.</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", {}, 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" 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.</div></li></ul>\n' +
'<div style="clear: both;"></div>',
destroy: '$("#doScale").unbind();',
options: [
{ 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); });' },
]
},
{
title: 'Slide',
desc: 'Slide an element out of or into the viewport.',
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.</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"}, 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); });' }
]
}
]
};
$(function(){
uiRenderDemo(model);
});
</script>
|
