diff --git a/README.md b/README.md index dd9b573..d4f0f86 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ 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 ------------------------------ * 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) + * 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 * Binde mindestens eine der folgenden Javascript-Dateien im HTML ein, je nach dem, welche Sprachen deine Uhr unterstützen soll: * uhr-de_CH.js @@ -26,14 +28,14 @@ Du willst Bärneruhr auf deiner Website verwenden? Das geht ganz einfach. ---------------------------------------- Erstelle ein leeres `
` mit einer ID: -
+
3. Uhr per Javascript konfigurieren ----------------------------------- 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 * 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. +Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit + + jQuery('div').uhr(); + +würde also jedes `
`-Element der Seite in eine Uhr umgewandelt + 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'), { - status: 'on', // 'on' oder 'off' - theme: 'red', // 'black', 'red', 'blue', 'green' oder 'white' - layout: 'en', // 'de_DE', 'de' oder 'en' (je nach eingebundenen Sprachdateien) - width: '20em' // eine CSS-Grössenangabe + jQuery('#uhrcontainer').uhr({ + status: 'on', // 'on' (default) oder 'off' + theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white' + language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien) + 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! A. Lizenzbestimmungen