Trackbar in Websites

Marco D. · Verfasst: Mo 13.08.07 12:00

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?

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Heiko · Beiträge: 3169 Erhaltene Danke: 11

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. · Verfasst: 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?

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Heiko · Beiträge: 3169 Erhaltene Danke: 11

Guck dir mal meebo an. Die haben dort eine GUI auf JS basierend.

@Mausziehen: Dafür gibt es events
@Mausdrücken: onclick

.

Marco D. · Verfasst: 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.

markieren

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" />
  <!--<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'></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>

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

FSS · Verfasst: Mo 13.08.07 14:51

Also in Opera und Firefox bekomme ich nur einen schwarzen Balken (siehe Screenshot):

Einloggen, um Attachments anzusehen!

Marco D. · Verfasst: 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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Marco D. · Verfasst: Mi 15.08.07 11:37

Hier noch einmal eine erweiterte Version:

markieren

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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Marco D. · Verfasst: 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:

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

Jakob_Ullmann · Verfasst: 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:

markieren

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" />  
  <!--<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 + '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. · Verfasst: 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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

BenBE · Verfasst: Mi 15.08.07 20:21

So richtig nach ner Trackbar (wie man sie aus der VCL kennt), sieht das aber nicht aus ...

_________________

Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.

Marco D. · Verfasst: 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.

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

GTA-Place · Verfasst: Mi 15.08.07 21:49

Regler verschiebbar; XHTML 1.1 valide; funktioniert im IE und FF;:

markieren

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>

_________________
"Wer Ego-Shooter Killerspiele nennt, muss konsequenterweise jeden Horrorstreifen als Killerfilm bezeichnen." (Zeit.de)

Marco D. · Verfasst: Do 16.08.07 08:11

@GTA: Ist sehr gut gemacht. :zustimm:

_________________
Pascal keeps your hand tied. C gives you enough rope to hang yourself. C++ gives you enough rope to shoot yourself in the foot

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme