diff options
Diffstat (limited to 'static/development-bundle/demos/toggle/default.html')
-rw-r--r-- | static/development-bundle/demos/toggle/default.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/static/development-bundle/demos/toggle/default.html b/static/development-bundle/demos/toggle/default.html new file mode 100644 index 0000000..ffb464b --- /dev/null +++ b/static/development-bundle/demos/toggle/default.html | |||
@@ -0,0 +1,94 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Effects - Toggle 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 | //run the currently selected effect | ||
31 | function runEffect(){ | ||
32 | //get effect type from | ||
33 | var selectedEffect = $('#effectTypes').val(); | ||
34 | |||
35 | //most effect types need no options passed by default | ||
36 | var options = {}; | ||
37 | //check if it's scale, transfer, or size - they need options explicitly set | ||
38 | if(selectedEffect == 'scale'){ options = {percent: 0}; } | ||
39 | else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } | ||
40 | |||
41 | //run the effect | ||
42 | $("#effect").toggle(selectedEffect,options,500); | ||
43 | }; | ||
44 | |||
45 | //set effect from select menu value | ||
46 | $("#button").click(function() { | ||
47 | runEffect(); | ||
48 | return false; | ||
49 | }); | ||
50 | |||
51 | }); | ||
52 | </script> | ||
53 | </head> | ||
54 | <body> | ||
55 | |||
56 | <div class="demo"> | ||
57 | |||
58 | <div class="toggler"> | ||
59 | <div id="effect" class="ui-widget-content ui-corner-all"> | ||
60 | <h3 class="ui-widget-header ui-corner-all">Toggle</h3> | ||
61 | <p> | ||
62 | Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. | ||
63 | </p> | ||
64 | </div> | ||
65 | </div> | ||
66 | |||
67 | <select name="effects" id="effectTypes"> | ||
68 | <option value="blind">Blind</option> | ||
69 | <option value="bounce">Bounce</option> | ||
70 | <option value="clip">Clip</option> | ||
71 | <option value="drop">Drop</option> | ||
72 | <option value="explode">Explode</option> | ||
73 | <option value="fold">Fold</option> | ||
74 | <option value="highlight">Highlight</option> | ||
75 | <option value="puff">Puff</option> | ||
76 | <option value="pulsate">Pulsate</option> | ||
77 | <option value="scale">Scale</option> | ||
78 | <option value="shake">Shake</option> | ||
79 | <option value="size">Size</option> | ||
80 | <option value="slide">Slide</option> | ||
81 | <option value="transfer">Transfer</option> | ||
82 | </select> | ||
83 | |||
84 | <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> | ||
85 | </div><!-- End demo --> | ||
86 | |||
87 | <div class="demo-description"> | ||
88 | |||
89 | <p>Click the button above to preview the effect.</p> | ||
90 | |||
91 | </div><!-- End demo-description --> | ||
92 | |||
93 | </body> | ||
94 | </html> | ||