← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.7.1/development-bundle/demos/hide/default.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery.ui-1.7.1/development-bundle/demos/hide/default.html
 
1
<!doctype html>
 
2
<html lang="en">
 
3
<head>
 
4
        <title>jQuery UI Effects - Hide 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: 0}; }
 
40
                        else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
 
41
                        else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
 
42
                        
 
43
                        //run the effect
 
44
                        $("#effect").hide(selectedEffect,options,500,callback);
 
45
                };
 
46
                
 
47
                //callback function to bring a hidden box back
 
48
                function callback(){
 
49
                        setTimeout(function(){
 
50
                                $("#effect:hidden").removeAttr('style').hide().fadeIn();
 
51
                        }, 1000);
 
52
                };
 
53
                
 
54
                //set effect from select menu value
 
55
                $("#button").click(function() {
 
56
                        runEffect();
 
57
                        return false;
 
58
                });
 
59
 
 
60
        });
 
61
        </script>
 
62
</head>
 
63
<body>
 
64
 
 
65
<div class="demo">
 
66
 
 
67
<div class="toggler">
 
68
        <div id="effect" class="ui-widget-content ui-corner-all">
 
69
                <h3 class="ui-widget-header ui-corner-all">Hide</h3>
 
70
                <p>
 
71
                        Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
 
72
                </p>
 
73
        </div>
 
74
</div>
 
75
 
 
76
<select name="effects" id="effectTypes">
 
77
        <option value="blind">Blind</option>
 
78
        <option value="bounce">Bounce</option>
 
79
        <option value="clip">Clip</option>
 
80
        <option value="drop">Drop</option>
 
81
        <option value="explode">Explode</option>
 
82
        <option value="fold">Fold</option>
 
83
        <option value="highlight">Highlight</option>
 
84
        <option value="puff">Puff</option>
 
85
        <option value="pulsate">Pulsate</option>
 
86
        <option value="scale">Scale</option>
 
87
        <option value="shake">Shake</option>
 
88
        <option value="size">Size</option>
 
89
        <option value="slide">Slide</option>
 
90
        <option value="transfer">Transfer</option>
 
91
</select>
 
92
 
 
93
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
 
94
 
 
95
 
 
96
</div><!-- End demo -->
 
97
 
 
98
<div class="demo-description">
 
99
 
 
100
<p>Click the button above to preview the effect.</p>
 
101
 
 
102
</div><!-- End demo-description -->
 
103
 
 
104
</body>
 
105
</html>