template
Index :: Javascript :: Control: Schieberegler (RGB-Einstellung) (
Demo)
Ein Schieberegler wird im Allgemeinen dazu benutzt, eine Variable innerhalb eines bestimmten Wertebereichs zu verändern. Er besitzt hierzu eine balkenartige Fläche sowie einen verschiebbaren Marker. Ein Anklicken der Fläche bewirkt im einfachsten Falle das Setzen des Markers auf die angeklickte Stelle. Denkbar wäre auch ein Blättern-Effekt, d.h. ein Versetzen des Markers um einen bestimmten Betrag in Richtung der Klickstelle.
Optional können an den Balkenenden noch Buttons für den schrittweisen Versatz des Markers in die jeweilige Richtung angeboten werden.
Die Steuerung des Markers geschieht mithilfe einer Drag&Drop-Aktion (siehe Maus: Dragging), bei der ein Clipping dafür sorgt, dass der Marker innerhalb der Fläche bzw. des vorgegebenen Wertebereichs bleibt.
Das Anklicken der Fläche wird i.d.R. über ein separates Abfangen des onMouseup-Events verarbeitet.
In der Demo können die RGB-Werte einer Text- und einer Hintergrundfarbe eingestellt werden, wozu insgesamt 6 Schieberegler (2 x 3 Kanäle) verwendet werden.
Auszüge aus dem Quellcode:
Javascript im Header
var ie = document.all;
var DragObj = null, DownX, DragX, DragID = 0;
var ColRGB = [0xFFFFFF, 0];
function Drag_Down(e) {
var o = ie? event.srcElement: e.target;
if (o.id.substr(0, 4) != "drag") return true;
DragObj = o.style; DragID = parseInt(o.id.substr(4, o.id.length-4));
DownX = parseInt(DragObj.left); DragX = ie? event.clientX: e.clientX;
document.onmousemove = Drag_Move; return false;
}
function Drag_Move(e) {
if (!DragObj) return true;
var x = DownX - DragX + (ie? event.clientX: e.clientX);
DragObj.left = (x = Math.min(Math.max(x, -8), 247));
var i = Math.floor(DragID/3);
SetColor(i, DragID-i*3, x+8); return false;
}
function Drag_Up() {
if (!DragObj) return true;
DragObj=null; return false;
}
//---- Balken
function OnRowUp(evt, i, k) {
if (DragObj) return true;
var x;
if (window.event) x = window.event.offsetX;
else if (evt.target) {
var p = 0; var el = evt.target;
do { p += el.offsetLeft; } while (el = el.offsetParent);
x = evt.clientX - p;
} else return true;
x = Math.min(Math.max(x, 0), 255);
document.getElementById("drag"+(i*3+k)).style.left = x-8;
SetColor(i, k, x); return true;
}
function SetColor(i, k, c) {
switch (k) {
case 0: ColRGB[i] = (ColRGB[i] & 0xFFFF) | (c<<16); break;
case 1: ColRGB[i] = (ColRGB[i] & 0xFF00FF) | (c<<8); break;
case 2: ColRGB[i] = (ColRGB[i] & 0xFFFF00) | c; break;
} c = "00000"+ ColRGB[i].toString(16).toUpperCase();
spShow[i].innerHTML = "<tt>"+ (c = "#"+ c.substr(c.length-6, 6)) +"</tt>";
if (i) tdTx.color = c; else tdTx.backgroundColor = c;
}
document.onmousedown = Drag_Down;
document.onmouseup = Drag_Up;
Im HTML-Code wird ein Schieberegler in einer Tabellenzeile untergebracht und besteht hier aus 3 Zellen: in der Mitte die eigentliche Fläche mit dem onMouseup-Event, sowie links und rechts ein optischer Abschluss.
Der Marker - ein Image mit id und Positionskorrektur im style-Attribut - befindet sich in der mittleren Zelle.
HTML-Auszug: Tabellenzeile mit Schieberegler
<tr>
<td><img src='../img/i17L0.gif' width='8' height='17'></td>
<td background='../img/GradR.png' style='CURSOR:pointer' onMouseup='OnRowUp(event,1,0)'>
<img id='drag3' src='../img/i17Ring.gif' width='17' height='17' style='POSITION:relative; LEFT:-8;'></td>
<td><img src='../img/i17RR.gif' width='8' height='17'></td>
</tr>
| template |
 |