updated readme
This commit is contained in:
parent
d51b00fece
commit
1204800def
1 changed files with 34 additions and 11 deletions
45
README.md
45
README.md
|
@ -1,13 +1,15 @@
|
||||||
Bärneruhr
|
Bärneruhr
|
||||||
=========
|
=========
|
||||||
|
|
||||||
Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach.
|
Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht das so einfach, dass es sogar deine Grossmutter tun könnte!
|
||||||
|
|
||||||
1. Benötigte Dateien einbinden
|
1. Benötigte Dateien einbinden
|
||||||
------------------------------
|
------------------------------
|
||||||
* Binde folgende Javascript-Dateien im HTML-Dokument ein:
|
* Binde folgende Javascript-Dateien im HTML-Dokument ein:
|
||||||
* jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
|
* jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
|
||||||
* jquery.cookie.js (Falls nicht bereits vorhanden)
|
* jquery-ui-1.10.3.custom.min.js (Falls nicht bereits vorhanden)
|
||||||
|
* Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt.
|
||||||
|
* jquery-cookie-1.4.0.js (Falls nicht bereits vorhanden)
|
||||||
* uhr.js
|
* uhr.js
|
||||||
* Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
|
* 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_CH.js
|
||||||
|
@ -26,14 +28,14 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach.
|
||||||
----------------------------------------
|
----------------------------------------
|
||||||
Erstelle ein leeres `<div>` mit einer ID:
|
Erstelle ein leeres `<div>` mit einer ID:
|
||||||
|
|
||||||
<div id="meineuhr"></div>
|
<div id="uhrcontainer"></div>
|
||||||
3. Uhr per Javascript konfigurieren
|
3. Uhr per Javascript konfigurieren
|
||||||
-----------------------------------
|
-----------------------------------
|
||||||
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
||||||
|
|
||||||
new Uhr(jQuery('#meineuhr'));
|
jQuery('#uhrcontainer').uhr();
|
||||||
|
|
||||||
Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt eine Uhr in der Standardkonfiguration. Das heisst:
|
Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
||||||
|
|
||||||
* Breite ist 100% des Eltenelements
|
* Breite ist 100% des Eltenelements
|
||||||
* Farbe ist Schwarz
|
* Farbe ist Schwarz
|
||||||
|
@ -42,17 +44,38 @@ Als Parameter wird ein jQuery-gewrapptes HTML-Element erwartet. Dies erzeugt ein
|
||||||
|
|
||||||
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
|
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
|
||||||
|
|
||||||
|
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
||||||
|
|
||||||
|
jQuery('div').uhr();
|
||||||
|
|
||||||
|
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt
|
||||||
|
|
||||||
4. Weitere Optionen
|
4. Weitere Optionen
|
||||||
-------------------
|
-------------------
|
||||||
Der Uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
||||||
|
|
||||||
new Uhr(jQuery('#uhrcontainer'), {
|
jQuery('#uhrcontainer').uhr({
|
||||||
status: 'on', // 'on' oder 'off'
|
status: 'on', // 'on' (default) oder 'off'
|
||||||
theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white'
|
theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white'
|
||||||
layout: 'en', // 'de_DE', 'de' oder 'en' (je nach eingebundenen Sprachdateien)
|
language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien)
|
||||||
width: '20em' // eine CSS-Grössenangabe
|
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
||||||
|
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
|
||||||
|
// true: immer die angegebene Konfiguration verwenden
|
||||||
});
|
});
|
||||||
|
|
||||||
|
5. Sonderfunktionen
|
||||||
|
-------------------
|
||||||
|
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit
|
||||||
|
|
||||||
|
{
|
||||||
|
time: new Date()
|
||||||
|
}
|
||||||
|
kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Mit dem On/Off-Schalter wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an.
|
||||||
|
|
||||||
|
Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden:
|
||||||
|
|
||||||
|
jQuery('#uhrcontainer').uhr("time", new Date());
|
||||||
|
|
||||||
Viel Spass!
|
Viel Spass!
|
||||||
|
|
||||||
A. Lizenzbestimmungen
|
A. Lizenzbestimmungen
|
||||||
|
|
Loading…
Reference in a new issue