← Back to branch summary

~keith-hughitt/helioviewer.org/2.0

« back to all changes in this revision

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

  • Committer: Keith Hughitt
  • Date: 2010-03-24 11:14:04 UTC
  • Revision ID: hughitt1@io-20100324111404-tjat3xqy09nqvwik
Helioviewer.org 2.0.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery.ui-1.7.1/development-bundle/demos/show/default.html
 
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>