Entwickler-Ecke
Off Topic - Trackbar in Websites
Marco D. - Mo 13.08.07 12:00
Titel: Trackbar in Websites
Kann man in einem HTML-Formular eine Art Trackbar einbauen und damit wie in Delphi arbeiten? Davon habe ich noch nie gehört, aber cool wäre es. Gibt es ein Workaround?
Heiko - Mo 13.08.07 12:06
Es gobt kein solches HTML-Element (zu mindestns habe ich bisher noch nie eine gefunden (auch in SelfHTML) ). Allerdings könntest du dir eine per JS zusammenbasteln (mehrere Divs...).
Marco D. - Mo 13.08.07 12:10
 Heiko hat folgendes geschrieben: |
| Es gobt kein solches HTML-Element (zu mindestns habe ich bisher noch nie eine gefunden (auch in SelfHTML) ). Allerdings könntest du dir eine per JS zusammenbasteln (mehrere Divs...). |
Und wie reagiert man auf die gedrückte Maustaste und das Ziehen?
Heiko - Mo 13.08.07 12:12
Guck dir mal meebo an. Die haben dort eine GUI auf JS basierend.
@Mausziehen: Dafür gibt es events
@Mausdrücken: onclick ;).
Marco D. - Mo 13.08.07 14:32
Ziehen geht nicht, aber mir reicht es so.
Habe ich soeben gecodet, könnt ihr ja mal ausprobieren. In eine neue HTML-Datei einfügen und öffnen. Im IE 7 klappt's.
XML-Daten
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:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Trackbar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Trackbar-Demo</h1>
<div id='mycontainer' style='text-align: center; color: green; font-weight: bold; float: left;'></div>
<div id='mycontainer2'></div>
<script language='JavaScript'>
//constructor of trackbar
//align_style is either 'vertical' or 'horizontal'
function Trackbar(container, align_style, instance_name) {
this.position = 3;
this.max = 50;
this.min = 20;
this.unselected_color = 'white';
this.selected_color = 'orange';
this.container = container;
if (align_style != 'vertical' && align_style != 'horizontal') {
this.align_style = 'vertical';
}
else {
this.align_style = align_style;
}
this.border_width = 2;
this.border_style = 'solid';
this.border_color = 'black';
this.cell_width = 50;
this.instance_name = instance_name;
}
//generates html code for trackbar into the container
Trackbar.prototype.Paint = function() {
var container = document.getElementById(this.container);
container.innerHTML = '';
for (i = 1 ; i <= this.max ; i++) {
var first = '<div onClick="' + this.instance_name + '.SetPosition(';
if (this.align_style == 'horizontal') {
first += i;
}
else {
first += (this.max - i + 1);
}
first += ')" style="';
if (this.align_style == 'horizontal') {
first += 'float: left; ';
}
if (this.align_style == 'vertical') {
if (i <= (this.max - this.position)) {
//print select color
first += 'background-color: ' + this.unselected_color + '; ';
}
else {
first += 'background-color: ' + this.selected_color + '; ';
}
}
else {
if (this.position >= i) {
//print select color
first += 'background-color: ' + this.selected_color + '; ';
}
else {
first += 'background-color: ' + this.unselected_color + '; ';
}
}
first += 'width: ' + this.cell_width + 'px; border-width: ' + this.border_width + 'px; border-style: ' + this.border_style + '; border-color: ' + this.border_color + '">';
var second = '</div>';
container.innerHTML += first + second;
}
container.innerHTML += this.position;
}
Trackbar.prototype.SetPosition = function(position) {
if (position > this.min && position <= this.max) {
this.position = position;
this.Paint();
}
}
var tb = new Trackbar('mycontainer','vertical','tb');
tb.Paint();
var tb2 = new Trackbar('mycontainer2','vertical','tb2');
tb2.Paint();
</script>
</body>
</html> |
FSS - Mo 13.08.07 14:51
Also in Opera und Firefox bekomme ich nur einen schwarzen Balken (siehe Screenshot):
Marco D. - Mo 13.08.07 14:54
| FSS hat folgendes geschrieben: |
| Also in Opera und Firefox bekomme ich nur einen schwarzen Balken (siehe Screenshot): |
Hab grad nur IE 7 zur Verfügung. Schaue ich mir @home mal an.
Marco D. - Mi 15.08.07 11:37
Hier noch einmal eine erweiterte Version:
Quelltext
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:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Trackbar</title>
<link rel="stylesheet" href="style.css" />
<!--<script type="text/javascript" src="scripts.js"></script>-->
</head>
<body>
<h1>Trackbar-Demo</h1>
<div id='mycontainer' style='text-align: center; color: green; font-weight: bold; float: left'></div>
<div id='mycontainer2' style='float: left'></div>
<div id='mycontainer3' style='float: left'></div>
<div id='mycontainer4' style='float: left'></div>
<div id='mycontainer5' style='float: left'></div>
<div id='mycontainer6' style='float: left'></div>
<script language='JavaScript'>
//constructor of trackbar
//align_style is either 'vertical' or 'horizontal'
function Trackbar(container, align_style, instance_name) {
this.position = 1;
this.max = 10;
this.min = 0;
this.unselected_color = 'white';
this.selected_color = 'orange';
this.container = container;
if (align_style != 'vertical' && align_style != 'horizontal') {
this.align_style = 'vertical';
}
else {
this.align_style = align_style;
}
this.border_width = 1;
this.border_style = 'solid';
this.border_color = 'black';
this.cell_width = 60;
this.cell_height = 20;
this.instance_name = instance_name;
}
//generates html code for trackbar into the container
Trackbar.prototype.Paint = function() {
var container = document.getElementById(this.container);
container.innerHTML = '';
for (i = 1 ; i <= this.max ; i++) {
var first = '<div onClick="' + this.instance_name + '.SetPosition(';
if (this.align_style == 'horizontal') {
first += i;
}
else {
first += (this.max - i + 1);
}
first += ')" style="';
if (this.align_style == 'horizontal') {
first += 'float: left; ';
}
if (this.align_style == 'vertical') {
if (i <= (this.max - this.position)) {
//print select color
first += 'background-color: ' + this.unselected_color + '; ';
}
else {
first += 'background-color: ' + this.selected_color + '; ';
}
}
else {
if (this.position >= i) {
//print select color
first += 'background-color: ' + this.selected_color + '; ';
}
else {
first += 'background-color: ' + this.unselected_color + '; ';
}
}
first += 'width: ' + this.cell_width + 'px; border-width: ' + this.border_width + 'px; height: ' + this.cell_height + '; border-style: ' + this.border_style + '; border-color: ' + this.border_color + '">';
var second = '</div>';
container.innerHTML += first + second;
}
container.innerHTML += this.position;
}
Trackbar.prototype.SetPosition = function(position) {
if (position > this.min && position <= this.max) {
this.position = position;
this.Paint();
}
}
var tb = new Trackbar('mycontainer','vertical','tb');
tb.Paint();
var tb2 = new Trackbar('mycontainer2','vertical','tb2');
tb2.Paint();
var tb3 = new Trackbar('mycontainer3','vertical','tb3');
tb3.Paint();
var tb4 = new Trackbar('mycontainer4','vertical','tb4');
tb4.Paint();
var tb5 = new Trackbar('mycontainer5','vertical','tb5');
tb5.Paint();
var tb6 = new Trackbar('mycontainer6','vertical','tb6');
tb6.Paint();
</script>
</body>
</html> |
Konnte noch nicht im FF testen. Im IE läufts.
Marco D. - Mi 15.08.07 19:14
Das Problem mit dem FF scheint damit zusammenzuhängen, dass dieser keine height-Angabe für divs akzeptiert, sondern die Höhe des divs nach der Höhe des div-Inhaltes anzeigt. Der IE akzeptiert dagegen eine Pixel-Angabe für die Höhe des divs. Kennt jemand eine Lösung? :gruebel:
Jakob_Ullmann - Mi 15.08.07 19:21
Und was bringt diese Kompo!? :gruebel:
EDIT:// Probier's doch mal mit CSS.
Der FF akzeptiert auch eine Höhe für DIVs, allerdings nur mit Einheit, in diesem Fall also px.
Ich habe den Code mal etwas abgeändert - mit dieser Version funktioniert's zumindest im FF:
XML-Daten
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:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Trackbar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Trackbar-Demo</h1>
<div id='mycontainer' style='text-align: center; color: green; font-weight: bold; float: left'></div>
<div id='mycontainer2' style='float: left'></div>
<div id='mycontainer3' style='float: left'></div>
<div id='mycontainer4' style='float: left'></div>
<div id='mycontainer5' style='float: left'></div>
<div id='mycontainer6' style='float: left'></div>
<script language='JavaScript'>
//constructor of trackbar
//align_style is either 'vertical' or 'horizontal'
function Trackbar(container, align_style, instance_name) {
this.position = 1;
this.max = 10;
this.min = 0;
this.unselected_color = 'white';
this.selected_color = 'orange';
this.container = container;
if (align_style != 'vertical' && align_style != 'horizontal') {
this.align_style = 'vertical';
}
else {
this.align_style = align_style;
}
this.border_width = 1;
this.border_style = 'solid';
this.border_color = 'black';
this.cell_width = 60;
this.cell_height = 20;
this.instance_name = instance_name;
}
//generates html code for trackbar into the container
Trackbar.prototype.Paint = function() {
var container = document.getElementById(this.container);
container.innerHTML = '';
for (i = 1 ; i <= this.max ; i++) {
var first = '<div onClick="' + this.instance_name + '.SetPosition(';
if (this.align_style == 'horizontal') {
first += i;
}
else {
first += (this.max - i + 1);
}
first += ')" style="';
if (this.align_style == 'horizontal') {
first += 'float: left; ';
}
if (this.align_style == 'vertical') {
if (i <= (this.max - this.position)) {
//print select color
first += 'background-color: ' + this.unselected_color + '; ';
}
else {
first += 'background-color: ' + this.selected_color + '; ';
}
}
else {
if (this.position >= i) {
//print select color
first += 'background-color: ' + this.selected_color + '; ';
}
else {
first += 'background-color: ' + this.unselected_color + '; ';
}
}
first += 'width: ' + this.cell_width + 'px; border-width: ' + this.border_width + 'px; height: ' + this.cell_height + 'px; border-style: ' + this.border_style + '; border-color: ' + this.border_color + '">';
var second = '</div>';
container.innerHTML += first + second;
}
container.innerHTML += this.position;
}
Trackbar.prototype.SetPosition = function(position) {
if (position > this.min && position <= this.max) {
this.position = position;
this.Paint();
}
}
var tb = new Trackbar('mycontainer','vertical','tb');
tb.Paint();
var tb2 = new Trackbar('mycontainer2','vertical','tb2');
tb2.Paint();
var tb3 = new Trackbar('mycontainer3','vertical','tb3');
tb3.Paint();
var tb4 = new Trackbar('mycontainer4','vertical','tb4');
tb4.Paint();
var tb5 = new Trackbar('mycontainer5','vertical','tb5');
tb5.Paint();
var tb6 = new Trackbar('mycontainer6','vertical','tb6');
tb6.Paint();
</script>
</body>
</html> |
Du musst schreiben + 'px; ...' statt '; ...'.
Marco D. - Mi 15.08.07 20:05
Schau doch hin: Inline -CSS war die ganze Zeit da. :roll:
Ansonsten hast du Recht: Ich hatte in der height-Angabe im Inline-CSS die Einheit Pixel vergessen. Damit geht's nun auch im FF.
Was bringt das: Dass du dieses Ding anklicken kannst, hast du schon herausgefunden? Das kann z.B. für Umfragen genutzt werden. Bewerten einer Sache auf einer Skala von 0 bis X. Und mit tb.position kannst du die Auswahl auslesen.
BenBE - Mi 15.08.07 20:21
So richtig nach ner Trackbar (wie man sie aus der VCL kennt), sieht das aber nicht aus ...
Marco D. - Mi 15.08.07 20:48
Meinst du jetzt Funktionalität oder Optik?
@Funktionalität:
Der einzige mir erkennbare Unterschied ist, dass man einen Regler nicht verschieben kann. Finde ich nicht wichtig, da man auch durch Anklicken leicht etwas einstellen kann.
@Optik:
Was gibt's denn da zu meckern? :mrgreen: Das Aussehen kann im Konstruktor angepasst werden.
GTA-Place - Mi 15.08.07 21:49
Regler verschiebbar; XHTML 1.1 valide; funktioniert im IE und FF;:
Quelltext
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:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Trackbar</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Trackbar-Demo</h1>
<div id="mycontainer" style="text-align: center; color: green; font-weight: bold; float: left" />
<script type="text/javascript">
// <![CDATA[
// constructor of trackbar
// align_style is either 'vertical' or 'horizontal'
function Trackbar(container, align_style, instance_name) {
this.position = 1;
this.max = 10;
this.min = 0;
this.unselected_color = 'white';
this.selected_color = 'orange';
this.container = container;
if (align_style != 'vertical' && align_style != 'horizontal')
this.align_style = 'vertical';
else
this.align_style = align_style;
this.border_width = 1;
this.border_style = 'solid';
this.border_color = 'black';
this.cell_width = 60;
this.cell_height = 20;
this.instance_name = instance_name;
this.MouseDown = false;
}
// generates html code for trackbar into the container
Trackbar.prototype.Paint = function() {
var container = document.getElementById(this.container);
container.innerHTML = '';
for (var i = 1; i <= this.max; i++) {
var first = '<div onmousemove="' + this.instance_name + '.MouseMove(';
if (this.align_style == 'horizontal')
first += i;
else
first += (this.max - i + 1);
first += ');" onmousedown="' + this.instance_name + '.SetPosition(';
if (this.align_style == 'horizontal')
first += i;
else
first += (this.max - i + 1);
first += ')" onmouseup="' + this.instance_name + '.MouseDown = false;" style="';
if (this.align_style == 'horizontal')
first += 'float: left; ';
if (this.align_style == 'vertical') {
if (i <= (this.max - this.position))
first += 'background-color: ' + this.unselected_color + '; '; // print select color
else
first += 'background-color: ' + this.selected_color + '; ';
} else {
if (this.position >= i)
first += 'background-color: ' + this.selected_color + '; '; // print select color
else
first += 'background-color: ' + this.unselected_color + '; ';
}
first += 'width: ' + this.cell_width + 'px; border-width: ' + this.border_width + 'px; ';
first += 'height: ' + this.cell_height + 'px; border-style: ' + this.border_style + '; ';
first += 'border-color: ' + this.border_color + '">';
var second = '</div>';
container.innerHTML += first + second;
}
container.innerHTML += this.position;
}
Trackbar.prototype.SetPosition = function(position) {
if (position > this.min && position <= this.max) {
this.MouseDown = true;
this.position = position;
this.Paint();
}
}
Trackbar.prototype.MouseMove = function(position) {
if (position > this.min && position <= this.max && this.MouseDown) {
this.position = position;
this.Paint();
}
}
var tb = new Trackbar('mycontainer','vertical','tb');
tb.Paint();
// ]]>
</script>
</body>
</html> |
Marco D. - Do 16.08.07 08:11
@GTA: Ist sehr gut gemacht. :zustimm:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2026 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!