← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery.ui-1.6rc2/demos/real-world/range-interface/index.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.6rc2/demos/real-world/range-interface/index.html
1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3
 
<head>
4
 
<meta http-equiv="Content-Language" content="en" />
5
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
 
<title>Slider Test Page</title>
7
 
<script src="../../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
8
 
<link rel="stylesheet" href="../../../themes/flora/flora.all.css" type="text/css" media="screen" title="no title" charset="utf-8">
9
 
<script src="../../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>
10
 
<script src="../../../ui/ui.slider.js" type="text/javascript" charset="utf-8"></script>
11
 
<script src="../../../ui/effects.core.js" type="text/javascript" charset="utf-8"></script>
12
 
<script src="../../../ui/effects.blind.js" type="text/javascript" charset="utf-8"></script>
13
 
<script src="../../../ui/effects.bounce.js" type="text/javascript" charset="utf-8"></script>
14
 
<script src="../../../ui/effects.clip.js" type="text/javascript" charset="utf-8"></script>
15
 
<script src="../../../ui/effects.drop.js" type="text/javascript" charset="utf-8"></script>
16
 
<script src="../../../ui/effects.explode.js" type="text/javascript" charset="utf-8"></script>
17
 
<script src="../../../ui/effects.fold.js" type="text/javascript" charset="utf-8"></script>
18
 
<script src="../../../ui/effects.highlight.js" type="text/javascript" charset="utf-8"></script>
19
 
<script src="../../../ui/effects.pulsate.js" type="text/javascript" charset="utf-8"></script>
20
 
<script src="../../../ui/effects.scale.js" type="text/javascript" charset="utf-8"></script>
21
 
<script src="../../../ui/effects.shake.js" type="text/javascript" charset="utf-8"></script>
22
 
<script src="../../../ui/effects.slide.js" type="text/javascript" charset="utf-8"></script>
23
 
<script src="../../../ui/effects.transfer.js" type="text/javascript" charset="utf-8"></script>
24
 
 
25
 
<style type="text/css" media="all">
26
 
#wrap {
27
 
        width: 900px;
28
 
        margin: 0 auto;
29
 
}
30
 
#col-1 {
31
 
        width: 220px;
32
 
        border: 1px solid #ccc;
33
 
        padding: 20px;
34
 
        float: left;
35
 
}
36
 
#col-2 {
37
 
        width: 500px;
38
 
        float: left;
39
 
}
40
 
#col-2 div {
41
 
        width: 100px;
42
 
        height: 100px;
43
 
        background: #ccc;
44
 
        border: 1px solid #000;
45
 
        margin: 20px;
46
 
        float: left;
47
 
        text-align: center;
48
 
        font-size: 150%;
49
 
}
50
 
.label-1 { position: absolute; left: 0; top: -1.1em; }
51
 
.label-2 { position: absolute; right: 0; top: -1.1em; }
52
 
</style>
53
 
</head>
54
 
<body class="flora">
55
 
<div id="wrap">
56
 
        <h1>Slider Interface Example</h1>
57
 
        <div id="col-1">
58
 
                <div id="slider1" class="ui-slider-2">
59
 
                        <div class="ui-slider-handle"></div>
60
 
                        <div class="ui-slider-handle"></div>    
61
 
                        <span class="label-1">0</span>
62
 
                        <span class="label-2">100</span>
63
 
                </div>
64
 
                <br />
65
 
                <select id="effects">
66
 
                        <option>fade</option>
67
 
                        <option>drop</option>
68
 
                        <option>fold</option>
69
 
                        <option>highlight</option>
70
 
                        <option>explode</option>
71
 
                        <option>slide</option>
72
 
                        <option>clip</option>
73
 
                        <option>shake</option>
74
 
                        <option>scale</option>
75
 
                        <option>pulsate</option>
76
 
                        <option>bounce</option>
77
 
                </select>
78
 
        </div>
79
 
        
80
 
        <div id="col-2">
81
 
                <div>0</div>
82
 
                <div>10</div>
83
 
                <div>20</div>
84
 
                <div>30</div>
85
 
                <div>40</div>
86
 
                <div>50</div>
87
 
                <div>60</div>
88
 
                <div>70</div>
89
 
                <div>80</div>
90
 
                <div>90</div>
91
 
                <div>100</div>
92
 
        </div>
93
 
</div>
94
 
<script type="text/javascript">
95
 
$(function(){
96
 
        $('#slider1').slider({
97
 
                stepping: 10,
98
 
                min: 0, 
99
 
                max: 100,
100
 
                range: true,
101
 
                change: function(e, ui) {
102
 
                        var minValue = $('#slider1').slider('value', 0); 
103
 
                        var maxValue = $('#slider1').slider('value', 1);
104
 
                        $('#col-2 div').each(function(){
105
 
                                var value = parseInt($(this).html(), 10);
106
 
                                if (value < minValue || value > maxValue) {
107
 
                                        var effect = $('#effects').val();
108
 
                                        switch (effect) {
109
 
                                                case 'fade' :
110
 
                                                        $(this).fadeOut();
111
 
                                                break;
112
 
                                                case 'drop' :
113
 
                                                        $(this).hide('drop', { direction: 'down' });
114
 
                                                break;
115
 
                                                default :
116
 
                                                        $(this).hide(effect);
117
 
                                        }
118
 
                                } else
119
 
                                        $(this).fadeIn();
120
 
                        });
121
 
                },
122
 
                handles: [
123
 
                        {start: 0, min: 0, max: 100},
124
 
                        {start: 100, min: 0, max: 100}
125
 
                ]
126
 
        });
127
 
});
128
 
</script>
129
 
</body>
130
 
</html>