58 lines
1.6 KiB
Text
58 lines
1.6 KiB
Text
|
Bärneruhr
|
||
|
|
|
||
|
|
Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach.
|
||
|
|
|
||
|
|
1. Benötigte Dateien einbinden
|
||
|
|
|
||
|
|
Binde folgende Javascript-Dateien im HTML-Dokument ein:
|
||
|
|
- jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
|
||
|
|
- jquery.cookie.js (Falls nicht bereits vorhanden)
|
||
|
|
- uhr.js
|
||
|
|
|
||
|
|
Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
|
||
|
|
- uhr-de_CH.js
|
||
|
|
- uhr-de.js
|
||
|
|
- uhr-en.js
|
||
|
|
|
||
|
|
Binde folgende CSS-Dateien im HTML-Dokument ein:
|
||
|
|
- uhr.css
|
||
|
|
- uhr-black.css
|
||
|
|
- uhr-blue.css
|
||
|
|
- uhr-green.css
|
||
|
|
- uhr-red.css
|
||
|
|
- uhr-white.css
|
||
|
|
|
||
|
|
Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden.
|
||
|
|
|
||
|
|
2. Uhr-Element im HTML-Dokument einfügen
|
||
|
|
|
||
|
|
Erstelle ein leeres <div> mit einer ID:
|
||
|
|
<div id="meineuhr"></div>
|
||
|
|
|
||
|
|
3. Uhr per Javascript konfigurieren
|
||
|
|
|
||
|
|
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
||
|
|
new Uhr($('#meineuhr'));
|
||
|
|
|
||
|
|
Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet.
|
||
|
|
|
||
|
|
Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst:
|
||
|
|
- Breite ist 100% des Eltenelements
|
||
|
|
- Farbe ist Schwarz
|
||
|
|
- Sprache ist Bärndütsch
|
||
|
|
- Die Uhr ist eingeschaltet
|
||
|
|
|
||
|
|
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt
|
||
|
|
|
||
|
|
4. Weitere Optionen
|
||
|
|
Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
||
|
|
new Uhr($('#uhrcontainer'), {
|
||
|
|
status: 'on', // 'on' oder 'off'
|
||
|
|
theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'
|
||
|
|
layout: 'en', // 'de_EC', 'de' oder 'en' (je nach eingebundenen Sprachdateien
|
||
|
|
width: '20em' // eine CSS-Grössenangabe
|
||
|
|
});
|
||
|
|
|
||
|
|
Viel Spass!
|
||
|
|
|