Mercurial > hg > NetworkVis

comparison d3s_examples/python-neo4jrestclient/static/platin/lib/slider/demo.html @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
comparison
equal deleted inserted replaced
7:45dad9e38c82 8:18ef6948d689
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>