diff options
Diffstat (limited to 'static/development-bundle/demos/show/default.html')
-rw-r--r-- | static/development-bundle/demos/show/default.html | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/static/development-bundle/demos/show/default.html b/static/development-bundle/demos/show/default.html new file mode 100644 index 0000000..7c70526 --- /dev/null +++ b/static/development-bundle/demos/show/default.html | |||
@@ -0,0 +1,106 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Effects - Show Demo</title> | ||
5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
6 | <script type="text/javascript" src="../../jquery-1.3.2.js"></script> | ||
7 | <script type="text/javascript" src="../../ui/effects.core.js"></script> | ||
8 | <script type="text/javascript" src="../../ui/effects.blind.js"></script> | ||
9 | <script type="text/javascript" src="../../ui/effects.bounce.js"></script> | ||
10 | <script type="text/javascript" src="../../ui/effects.clip.js"></script> | ||
11 | <script type="text/javascript" src="../../ui/effects.drop.js"></script> | ||
12 | <script type="text/javascript" src="../../ui/effects.explode.js"></script> | ||
13 | <script type="text/javascript" src="../../ui/effects.fold.js"></script> | ||
14 | <script type="text/javascript" src="../../ui/effects.highlight.js"></script> | ||
15 | <script type="text/javascript" src="../../ui/effects.pulsate.js"></script> | ||
16 | <script type="text/javascript" src="../../ui/effects.scale.js"></script> | ||
17 | <script type="text/javascript" src="../../ui/effects.shake.js"></script> | ||
18 | <script type="text/javascript" src="../../ui/effects.slide.js"></script> | ||
19 | <script type="text/javascript" src="../../ui/effects.transfer.js"></script> | ||
20 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
21 | <style type="text/css"> | ||
22 | .toggler { width: 500px; height: 200px; } | ||
23 | #button { padding: .5em 1em; text-decoration: none; } | ||
24 | #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } | ||
25 | #effect h3 { margin: 0; padding: 0.4em; text-align: center; } | ||
26 | .ui-effects-transfer { border: 2px dotted gray; } | ||
27 | </style> | ||
28 | <script type="text/javascript"> | ||
29 | $(function() { | ||
30 | |||
31 | //run the currently selected effect | ||
32 | function runEffect(){ | ||
33 | //get effect type from | ||
34 | var selectedEffect = $('#effectTypes').val(); | ||
35 | |||
36 | //most effect types need no options passed by default | ||
37 | var options = {}; | ||
38 | //check if it's scale, transfer, or size - they need options explicitly set | ||
39 | if(selectedEffect == 'scale'){ options = {percent: 100}; } | ||
40 | else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; } | ||
41 | else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; } | ||
42 | |||
43 | //run the effect | ||
44 | $("#effect").show(selectedEffect,options,500,callback); | ||
45 | }; | ||
46 | |||
47 | //callback function to bring a hidden box back | ||
48 | function callback(){ | ||
49 | setTimeout(function(){ | ||
50 | $("#effect:visible").removeAttr('style').hide().fadeOut(); | ||
51 | }, 1000); | ||
52 | }; | ||
53 | |||
54 | //set effect from select menu value | ||
55 | $("#button").click(function() { | ||
56 | runEffect(); | ||
57 | return false; | ||
58 | }); | ||
59 | |||
60 | $("#effect").hide(); | ||
61 | }); | ||
62 | </script> | ||
63 | </head> | ||
64 | <body> | ||
65 | |||
66 | <div class="demo"> | ||
67 | |||
68 | <div class="toggler"> | ||
69 | <div id="effect" class="ui-widget-content ui-corner-all"> | ||
70 | <h3 class="ui-widget-header ui-corner-all">Show</h3> | ||
71 | <p> | ||
72 | Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. | ||
73 | </p> | ||
74 | </div> | ||
75 | </div> | ||
76 | |||
77 | <select name="effects" id="effectTypes"> | ||
78 | <option value="blind">Blind</option> | ||
79 | <option value="bounce">Bounce</option> | ||
80 | <option value="clip">Clip</option> | ||
81 | <option value="drop">Drop</option> | ||
82 | <option value="explode">Explode</option> | ||
83 | <option value="fold">Fold</option> | ||
84 | <option value="highlight">Highlight</option> | ||
85 | <option value="puff">Puff</option> | ||
86 | <option value="pulsate">Pulsate</option> | ||
87 | <option value="scale">Scale</option> | ||
88 | <option value="shake">Shake</option> | ||
89 | <option value="size">Size</option> | ||
90 | <option value="slide">Slide</option> | ||
91 | <option value="transfer">Transfer</option> | ||
92 | </select> | ||
93 | |||
94 | <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> | ||
95 | |||
96 | |||
97 | </div><!-- End demo --> | ||
98 | |||
99 | <div class="demo-description"> | ||
100 | |||
101 | <p>Click the button above to preview the effect.</p> | ||
102 | |||
103 | </div><!-- End demo-description --> | ||
104 | |||
105 | </body> | ||
106 | </html> | ||