Een meter waar de min. en max. waarde in gegeven kunnen worden
Ik ben op zoek naar een mogelijkheid om via php een aantal meters te maken zoals hieronder:
Alle td's met class="active" krijgen een vulling.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<?php
<table class="eigenschappen">
<tbody>
<tr>
<th> </th>
<th class="align-right"> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td>Snelheid</td>
<td class="align-right">0</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>10 m/s</td>
</tr>
<tr>
<td>Inschakelduur</td>
<td class="align-right">0</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
</tr>
</tbody>
</table>
</td>
<td>100%</td>
</tr>
<tr>
<td>Stijfheid</td>
<td class="align-right">laag</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>hoog</td>
</tr>
<tr>
<td>Nauwkeurigheid</td>
<td class="align-right">>1 mm</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td><0,05 mm</td>
</tr>
<tr>
<td>Vuilbestendigheid</td>
<td class="align-right">niet</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
</tr>
</tbody>
</table>
</td>
<td>goed</td>
</tr>
<tr>
<td>Vochtbestendigheid</td>
<td class="align-right">niet</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>goed</td>
</tr>
</tbody>
</table>
?>
<table class="eigenschappen">
<tbody>
<tr>
<th> </th>
<th class="align-right"> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td>Snelheid</td>
<td class="align-right">0</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>10 m/s</td>
</tr>
<tr>
<td>Inschakelduur</td>
<td class="align-right">0</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
</tr>
</tbody>
</table>
</td>
<td>100%</td>
</tr>
<tr>
<td>Stijfheid</td>
<td class="align-right">laag</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>hoog</td>
</tr>
<tr>
<td>Nauwkeurigheid</td>
<td class="align-right">>1 mm</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td><0,05 mm</td>
</tr>
<tr>
<td>Vuilbestendigheid</td>
<td class="align-right">niet</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="active"></td>
<td class="active"></td>
<td class="active"></td>
</tr>
</tbody>
</table>
</td>
<td>goed</td>
</tr>
<tr>
<td>Vochtbestendigheid</td>
<td class="align-right">niet</td>
<td>
<table class="index" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td>goed</td>
</tr>
</tbody>
</table>
?>
Gewijzigd op 22/06/2012 10:49:15 door Hans Jonker
volgens mij vraag je je af hoe je de meters in moet vullen.
heb ik gelijk?
Gewijzigd op 22/06/2012 10:53:45 door Reshad F
HTML heeft hiervoor de <meter> element uitgevonden: http://html5doctor.com/measure-up-with-the-meter-tag/
Toevoeging op 22/06/2012 12:00:20:
<meter min="0" low="3" high="7" max="10" value="7"></meter> Begint altijd bij nul.
want de meter tag is niets meer dan een ratingbar
mijn gevoel zegt dat jij op zoek bent naar iets zoals tussen a en b in een schaal van 10 (100%)
Toevoeging op 22/06/2012 12:09:43:
En toen had niemand meer een antwoord.
Ontzettend bedankt voor je opmerking
Quote:
Zoek eens op HTML range oid
Ik heb het nu voor elkaar met Jquery sliders
Toevoeging op 22/06/2012 15:25:37:
Voor een ieder die er belang bij heeft.
Hier een oplossing:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function() {
$("#slider").slider({
range: true,
min: 0,
max: 10,
values: [4, 6],
disabled: true
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
?>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function() {
$("#slider").slider({
range: true,
min: 0,
max: 10,
values: [4, 6],
disabled: true
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
?>
De php tag voor de mooie opmaak.
Gewijzigd op 22/06/2012 15:28:19 door Hans Jonker