source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/combobox/animation.html @ 598

Last change on this file since 598 was 598, checked in by vmipsl, 12 years ago

images
File size: 6.9 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4    <title>ComboBox</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="%description%" />
8    <meta name="keywords" content="" />
9    <meta name="author" content="ComponentOne" />
10   
11    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
12   
13    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
14    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
15    <script src="../../external/jquery.wijmo-open.all.2.2.2.min.js" type="text/javascript"></script>
16    <link href="../../themes/wijmo/jquery.wijmo-open.2.2.2.css" rel="stylesheet" type="text/css" />
17    <link href="../../themes/wijmo/jquery.wijmo.wijcombobox.css" rel="stylesheet" type="text/css" />
18    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
19    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
20    <script src="../../wijmo/jquery.wijmo.wijcombobox.js" type="text/javascript"></script>
21    <script id="scriptInit" type="text/javascript">
22        $(document).ready(function () {
23            // put all your jQuery goodness in here.
24            var testArray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
25            var myReader = new wijarrayreader([{
26                name: 'label'
27            }, {
28                name: 'value'
29            }, {
30                name: 'selected',
31                defaultValue: false
32            }]);
33            var datasourceOptions = {
34                reader: myReader,
35                data: testArray
36            };
37            var datasource = new wijdatasource({
38                reader: myReader,
39                data: testArray
40            });
41            $("#tags").wijcombobox({
42               
43                data: datasource,
44                width: 150
45            });
46        });
47
48        function changeProperties() {
49            var showingSpeed, hidingSpeed, expandingSpeed, collapsingSpeed;
50            showingSpeed = parseNumberFromString($('#showingSpeed').val());
51            hidingSpeed = parseNumberFromString($('#hidingSpeed').val());
52            var showingAnimation = {
53                animated: $('#showingEffectTypes').get(0).value,
54                options: null,
55                duration: showingSpeed
56            };
57            var hidingAnimation = {
58                animated: $('#hidingEffectTypes').get(0).value,
59                options: null,
60                duration: hidingSpeed
61            };
62            var wij = $('#tags');
63            wij.wijcombobox('option', 'showingAnimation', showingAnimation);
64            wij.wijcombobox('option', 'hidingAnimation', hidingAnimation);
65        }
66
67        function parseNumberFromString(st) {
68            var i = 1000;
69            try {
70                i = parseInt(st);
71            }
72            catch (e) {
73                alert(e);
74            }
75            return i;
76        }
77    </script>
78</head>
79<body class="demo-single">
80    <div class="container">
81        <div class="header">
82            <h2>
83                Animation</h2>
84        </div>
85        <div class="main demo">
86            <!-- Begin demo markup -->
87            <div>
88                <input id="tags" />
89            </div>
90            <!-- End demo markup -->
91            <div class="demo-options">
92                <!-- Begin options markup -->
93                <div class="option-row">
94                    <label for="showingSpeed">
95                        Showing Speed
96                    </label>
97                    <input id="showingSpeed" type="text" value="1000" onblur="changeProperties()" />
98                </div>
99                <div class="option-row">
100                    <label for="showingEffectTypes">
101                        Showing Effect
102                    </label>
103                    <select id="showingEffectTypes" name="effects" onchange="changeProperties()">
104                        <option value="none">none</option>
105                        <option value="blind">Blind</option>
106                        <option value="bounce">Bounce</option>
107                        <option value="clip">Clip</option>
108                        <option value="drop">Drop</option>
109                        <option value="explode">Explode</option>
110                        <option value="fade">Fade</option>
111                        <option value="fold">Fold</option>
112                        <option value="highlight">Highlight</option>
113                        <option value="puff">Puff</option>
114                        <option value="pulsate">Pulsate</option>
115                        <option value="scale">Scale</option>
116                        <option value="shake">Shake</option>
117                        <option value="size">Size</option>
118                        <option value="slide">Slide</option>
119                    </select>
120                </div>
121                <div class="option-row">
122                    <label for="hidingSpeed">
123                        Hiding Speed
124                    </label>
125                    <input id="hidingSpeed" type="text" value="1000" onblur="changeProperties()" />
126                </div>
127                <div class="option-row">
128                    <label for="hidingEffectTypes">
129                        Hiding Effect
130                    </label>
131                    <select id="hidingEffectTypes" name="effects" onchange="changeProperties()">
132                        <option value="none">none</option>
133                        <option value="blind">Blind</option>
134                        <option value="bounce">Bounce</option>
135                        <option value="clip">Clip</option>
136                        <option value="drop">Drop</option>
137                        <option value="explode">Explode</option>
138                        <option value="fade">Fade</option>
139                        <option value="fold">Fold</option>
140                        <option value="highlight">Highlight</option>
141                        <option value="puff">Puff</option>
142                        <option value="pulsate">Pulsate</option>
143                        <option value="scale">Scale</option>
144                        <option value="shake">Shake</option>
145                        <option value="size">Size</option>
146                        <option value="slide">Slide</option>
147                    </select>
148                </div>
149                <!-- End options markup -->
150            </div>
151        </div>
152        <div class="footer demo-description">
153            <p>
154This sample demonstrates the different animation effects and how you can manipulate their speed.
155            </p>
156        </div>
157    </div>
158</body>
159</html>
Note: See TracBrowser for help on using the repository browser.