|
0
|
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
|
|
|
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"> </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>
|
