|
PHP Basics
• Administrationsbereich
• Counter
• Umfrage
• Kalender
• Kontaktformular
Javascript
• WebAudio Player
• WebAudio Player Singles
• Web-Farbmixer
• Beim Scrollen nachladen
Canvas
• Weihnachtskalender
• BCD Uhr
• Analog Anzeigeinstrument
• Drehregler
• Schieberegler
• Schiebeschalter
Navigation
• Registerkarten-Navigation
• Rotationsmenue
Animation & Spiele
• Warp-Flug
• Lichtjockey
HTML
• HTML 5 Grundgerüst
CSS
• Responsive Tabelle
|
| [Beispiel] [Download] |
Schiebeschalter sieht man immer häufiger, sei es in den Handyeinstellungen oder auf Internetseiten.
Anlass genug, mal einen eigenen zu programmieren. Dieser hier ist recht simpel und verzichtet auf Animationen.
Dieses Script bietet einige Konfigurationsmöglichkeiten in Darstellung und Funktionsweise:
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
| <script type="text/javascript" src="javascript/nSchalter/CanvasSchalter.js"></script>
<canvas id="nSsCv0" width="50" height="22" style="border: 0px;" onclick="javascript:nSsCvSet(0, -1);"></canvas>
<script language="javascript">
var nSsCv = [];
// Konfiguration für einen SChiebeschalter
// ---------------------------------------
nSsCv[0] = [];
nSsCv[0]['titel_an'] = 'An'; // MouseOver-Titel bei Stellung an
nSsCv[0]['titel_aus'] = 'Aus'; // MouseOver-Titel bei Stellung aus
nSsCv[0]['start'] = 0; // Startstellung 1 oder 0
nSsCv[0]['richtung'] = 'r'; // Stellung bei an - l oder r
nSsCv[0]['text_an'] = 'On'; // Schrift auf Fläche bei Stellung an
nSsCv[0]['text_aus'] = 'Off'; // Schrift auf Fläche bei Stellung aus
nSsCv[0]['text_farbe_an'] = '#FF0000'; // Farbe der Schrift bei Stellung an
nSsCv[0]['text_farbe_aus'] = '#FFFFFF'; // Farbe der Schrift bei Stellung aus
nSsCv[0]['breite_basis'] = 20; // Basis + ( 2 * Radius ) = Gesamtbreite
nSsCv[0]['hoehe_basis'] = 7; // Basis = Gesamthöhe
nSsCv[0]['Knopf_radius'] = 7; // Radius des Knopfes
nSsCv[0]['Knopf_farbe'] = '#808080'; // Farbe des Knopfes
nSsCv[0]['Knopf_rahmen'] = '#808080'; // Farbe des Knopfrahmens
nSsCv[0]['farbe_flaeche'] = '#000000'; // Hintergrundfarbe Fläche Schalter aus
nSsCv[0]['farbe_aktiv'] = '#00FFFF'; // Hintergrundfarbe Fläche Schalter an
nSsCv[0]['farbe_hinter'] = ''; // Hintergrundfarbe des Canvas, keine = transparent
nSsCv[0]['rahmen_farbe'] = '#808080'; // Farbe des Aussenrahmens
nSsCv[0]['stellung'] = 0; // READONLY - Speicher für den aktuellen Stellwert
</script>
<script type="text/javascript" src="nSchieberegler.js"></script>
|
Die ID des ersten Canvas "nSsCv0" hat die 0 am Ende, weiter ginge es mit "nSsCv1" usw.
Die Schalter werden automatisch nach dem Laden der Seite entsprechend ihren Startwerten aus der Konfiguration gezeichnet.
Übergibt man der zeichnenden Funktion als Soll-Stellung eine -1, wird der Zustand einfach gewechselt.
Es wird zuerst der Hintergrund gezeichnet, dann geprüft ob der Button links oder rechts stehen muss.
Zuletzt noch die korrekte Beschriftung positionierten und das war es dann auch schon.
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
| function nSsCvSet(sscvID, sscvStellung)
{
/*
* sscvStellung
* ============
*
* 0 = ausschalten
* 1 = einschalten
* -1 = Stellungswechsel
*
*/
useSs = 'nSsCv'+sscvID;
if( nSrCanvas = document.getElementById(useSs) )
{
ctx = nSrCanvas.getContext('2d');
if( sscvStellung == -1 )
{
if( nSsCv[sscvID]['stellung'] == 1 )
{
sscvStellung = 0;
nSrCanvas.title = nSsCv[sscvID]['titel_an'];
} else
{
sscvStellung = 1;
nSrCanvas.title = nSsCv[sscvID]['titel_aus'];
}
nSrCanvas.title = ( sscvStellung == 1 ) ? nSsCv[sscvID]['titel_an'] : nSsCv[sscvID]['titel_aus'];
}
nSsCv[sscvID]['width'] = nSrCanvas.width;
nSsCv[sscvID]['height'] = nSrCanvas.height;
// Hintergrund
// ===========
ctx.clearRect(0, 0, nSsCv[sscvID]['width'], nSsCv[sscvID]['height']);
if( nSsCv[sscvID]['farbe_hinter'] != '' )
{
ctx.fillStyle = nSsCv[sscvID]['farbe_hinter'];
ctx.fillRect(0, 0, nSsCv[sscvID]['width'], nSsCv[sscvID]['height']);
}
// Rahmen zeichnen
// ===============
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = ( sscvStellung == 1 ) ? nSsCv[sscvID]['farbe_aktiv'] : nSsCv[sscvID]['rahmen_farbe'];
ctx.fillStyle = ( sscvStellung == 1 ) ? nSsCv[sscvID]['farbe_aktiv'] : nSsCv[sscvID]['farbe_flaeche'];
x = ( nSsCv[sscvID]['width'] / 2 ) - ( nSsCv[sscvID]['breite_basis'] / 2 );
y = ( nSsCv[sscvID]['height'] / 2 ) ;
ctx.arc( x, y, nSsCv[sscvID]['hoehe_basis'], -(Math.PI/2), (Math.PI/2), true);
ctx.moveTo( x, y - nSsCv[sscvID]['hoehe_basis'] );
ctx.lineTo( x + nSsCv[sscvID]['breite_basis'], y - nSsCv[sscvID]['hoehe_basis']);
ctx.arc( x + nSsCv[sscvID]['breite_basis'], y, nSsCv[sscvID]['hoehe_basis'], -(Math.PI/2), (Math.PI/2), false);
ctx.lineTo( x, y + nSsCv[sscvID]['hoehe_basis'] );
ctx.stroke();
ctx.fill();
ctx.closePath();
// Knopf
// =====
if( ( sscvStellung == 0 && nSsCv[sscvID]['richtung'] == 'l' ) || ( sscvStellung == 1 && nSsCv[sscvID]['richtung'] == 'r' ) )
{
// Knopf rechts
x_k = x + nSsCv[sscvID]['breite_basis'];
} else
{
// Knopf links
x_k = x;
}
ctx.beginPath();
ctx.strokeStyle = nSsCv[sscvID]['Knopf_rahmen'];
ctx.fillStyle = nSsCv[sscvID]['Knopf_farbe'];
ctx.arc( x_k, y, nSsCv[sscvID]['Knopf_radius'], 0, (2*Math.PI), true);
ctx.stroke();
ctx.fill();
ctx.closePath();
// Beschriftung
// ============
ctx.font = "normal 10px Arial,sans-serif";
if( sscvStellung == 1 )
{
ctx.fillStyle = nSsCv[sscvID]['text_farbe_an'];
nSsCvUseText = nSsCv[sscvID]['text_an'];
} else
{
ctx.fillStyle = nSsCv[sscvID]['text_farbe_aus'];
nSsCvUseText = nSsCv[sscvID]['text_aus'];
}
if( nSsCvUseText != "" )
{
if( ( sscvStellung == 0 && nSsCv[sscvID]['richtung'] == 'r' ) || ( sscvStellung == 1 && nSsCv[sscvID]['richtung'] == 'l' ) )
{
ctx.fillText(nSsCvUseText, x + 3 + nSsCv[sscvID]['Knopf_radius'], y + 3);
} else
{
ctx.fillText(nSsCvUseText, x - 2, y + 3);
}
}
// Aktuelle Stellung speichern
// ===========================
nSsCv[sscvID]['stellung'] = sscvStellung;
}
}
|
Die Weiterverarbeitung kann in der Hauptfunktion nSsCvSet() anhand der Schalter-ID erfolgen.
|
|
