root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/demos/toggle/default.html @ 26899

Revision 26899, 3.0 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <title>jQuery UI Effects - Toggle Demo</title>
6    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7    <script src="../../jquery-1.6.2.js"></script>
8    <script src="../../ui/jquery.effects.core.js"></script>
9    <script src="../../ui/jquery.effects.blind.js"></script>
10    <script src="../../ui/jquery.effects.bounce.js"></script>
11    <script src="../../ui/jquery.effects.clip.js"></script>
12    <script src="../../ui/jquery.effects.drop.js"></script>
13    <script src="../../ui/jquery.effects.explode.js"></script>
14    <script src="../../ui/jquery.effects.fold.js"></script>
15    <script src="../../ui/jquery.effects.highlight.js"></script>
16    <script src="../../ui/jquery.effects.pulsate.js"></script>
17    <script src="../../ui/jquery.effects.scale.js"></script>
18    <script src="../../ui/jquery.effects.shake.js"></script>
19    <script src="../../ui/jquery.effects.slide.js"></script>
20    <link rel="stylesheet" href="../demos.css">
21    <style>
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    </style>
27    <script>
28    $(function() {
29        // run the currently selected effect
30        function runEffect() {
31            // get effect type from
32            var selectedEffect = $( "#effectTypes" ).val();
33           
34            // most effect types need no options passed by default
35            var options = {};
36            // some effects have required parameters
37            if ( selectedEffect === "scale" ) {
38                options = { percent: 0 };
39            } else if ( selectedEffect === "size" ) {
40                options = { to: { width: 200, height: 60 } };
41            }
42           
43            // run the effect
44            $( "#effect" ).toggle( selectedEffect, options, 500 );
45        };
46       
47        // set effect from select menu value
48        $( "#button" ).click(function() {
49            runEffect();
50            return false;
51        });
52    });
53    </script>
54</head>
55<body>
56
57<div class="demo">
58
59<div class="toggler">
60    <div id="effect" class="ui-widget-content ui-corner-all">
61        <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
62        <p>
63            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
64        </p>
65    </div>
66</div>
67
68<select name="effects" id="effectTypes">
69    <option value="blind">Blind</option>
70    <option value="bounce">Bounce</option>
71    <option value="clip">Clip</option>
72    <option value="drop">Drop</option>
73    <option value="explode">Explode</option>
74    <option value="fold">Fold</option>
75    <option value="highlight">Highlight</option>
76    <option value="puff">Puff</option>
77    <option value="pulsate">Pulsate</option>
78    <option value="scale">Scale</option>
79    <option value="shake">Shake</option>
80    <option value="size">Size</option>
81    <option value="slide">Slide</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
88
89<div class="demo-description">
90<p>Click the button above to preview the effect.</p>
91</div><!-- End demo-description -->
92
93</body>
94</html>
Note: See TracBrowser for help on using the browser.