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

Revision 26899, 3.2 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 - Show 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: 100 };
39            } else if ( selectedEffect === "size" ) {
40                options = { to: { width: 280, height: 185 } };
41            }
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" ).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</select>
92
93<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
94
95</div><!-- End demo -->
96
97
98
99<div class="demo-description">
100<p>Click the button above to preview the effect.</p>
101</div><!-- End demo-description -->
102
103</body>
104</html>
Note: See TracBrowser for help on using the browser.