root/trac/hacks/marketplugin/0.9/slider/demo.html

Revision 56 (checked in by stevegt, 6 years ago)

import slider 1.02

Line 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4 <html>
5 <head>
6 <title>Slider Demo (WebFX)</title>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <!--
9 <link type="text/css" rel="StyleSheet" href="css/winclassic.css" />
10 -->
11 <style type="text/css">
12
13
14 body {
15         font:           MessageBox;     
16         font:           Message-Box;
17 }
18
19
20 input {
21         width:                          50px;
22         text-align:                     right;
23         padding:                        1px;
24         margin-right:           15px;
25 }
26
27 input, select, button {
28         vertical-align:         middle;
29 }
30
31 #slider-1 {
32         margin: 10px;
33         width:  auto;
34 }
35
36 #slider-2 {
37         margin: 10px;
38 }
39
40 #color-picker {
41         border:         0; /*1px solid rgb(90,97,90);*/
42         width:          350px;
43         height:         80px;
44 }
45
46 </style>
47 <script type="text/javascript">
48 //<![CDATA[
49
50 function getQueryString( sProp ) {
51         var re = new RegExp( sProp + "=([^\\&]*)", "i" );
52         var a = re.exec( document.location.search );
53         if ( a == null )
54                 return "";
55         return a[1];
56 };
57
58 function changeCssFile( sCssFile ) {
59         var loc = String(document.location);
60         var search = document.location.search;
61         if ( search != "" )
62                 loc = loc.replace( search, "" );
63         loc = loc + "?css=" + sCssFile;
64         document.location.replace( loc );
65 }
66
67 var cssFile = getQueryString( "css" );
68 if ( cssFile == "" )
69         cssFile = "css/bluecurve/bluecurve.css";
70
71 document.write("<link type=\"text/css\" rel=\"StyleSheet\" href=\"" + cssFile + "\" />" );
72
73 //]]>
74 </script>
75 <!--
76 <link type="text/css" rel="StyleSheet" href="css/winclassic.css" />
77 -->
78
79 <script type="text/javascript" src="js/range.js"></script>
80 <script type="text/javascript" src="js/timer.js"></script>
81 <script type="text/javascript" src="js/slider.js"></script>
82 </head>
83 <body>
84
85 <p>Horizontal</p>
86 <div class="slider" id="slider-1" tabIndex="1">
87         <input class="slider-input" id="slider-input-1"/>
88 </div>
89
90 <p>
91 Value: <input id="h-value" onchange="s.setValue(parseInt(this.value))"/>
92 Minimum: <input id="h-min" onchange="s.setMinimum(parseInt(this.value))"/>
93 Maximum: <input id="h-max" onchange="s.setMaximum(parseInt(this.value))"/>
94 </p>
95
96 <p>Vertical</p>
97 <div class="slider" id="slider-2" tabIndex="1">
98         <input class="slider-input" id="slider-input-2"/>
99 </div>
100
101 <script type="text/javascript">
102
103 var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
104 var s2 = new Slider(document.getElementById("slider-2"), document.getElementById("slider-input-2"), "vertical");
105 s.onchange = function () {
106         document.getElementById("h-value").value = s.getValue();
107         document.getElementById("h-min").value = s.getMinimum();
108         document.getElementById("h-max").value = s.getMaximum();
109         s2.setValue(s.getValue());
110         s2.setMinimum(s.getMinimum());
111         s2.setMaximum(s.getMaximum());
112 };
113 s.setValue(50);
114
115 window.onresize = function () {
116         s.recalculate();
117 };
118
119 </script>
120
121 <p>
122 <select id="css-select">
123         <option value="css/winclassic.css">Windows Classic</option>
124         <option value="css/luna/luna.css">Windows XP Luna</option>
125         <option value="css/swing/swing.css">Java Swing</option>
126         <option value="css/bluecurve/bluecurve.css">Blue Curve</option>
127 </select>
128 <script type="text/javascript">
129 document.getElementById('css-select').value = cssFile;
130 </script>
131 &nbsp;
132 <button onclick="changeCssFile( document.getElementById('css-select').value )">Change</button>
133 </p>
134 <p>
135 <iframe name="color-picker" id="color-picker" src="rgbdemo.html" frameborder="0"></iframe><br />
136 Color: <span id="color-picker-out">&nbsp;</span></p>
137
138 <script type="text/javascript">
139
140 var f = window.frames["color-picker"];
141 f.onchange = function () {
142         var rgb = f.getRgb();
143         var out = document.getElementById("color-picker-out");
144         out.firstChild.data = "rgb(" + rgb.r + ", " +
145                                                         rgb.g + ", " +
146                                                         rgb.b + ")";
147 };
148
149 </script>
150
151 </body>
152 </html>
Note: See TracBrowser for help on using the browser.