diff --git a/README.md b/README.md index 841e2bc..ca5a1e5 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,9 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel: - +```html + +``` * Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein: * dist/libs.min.js: Dies enthält die minifizierten Versionen von jQuery, jQuery-UI (mit den Komponenten `code` und `widget`) und jQuery-Cookie. @@ -52,13 +54,17 @@ Je nach dem, in welchen Sprachen du die Uhr verwenden willst, noch eine der folg ---------------------------------------- Erstelle ein leeres `
` mit einer ID: -
+```html +
+``` 3. Uhr per Javascript konfigurieren ----------------------------------- Initialisiere die Uhr mit einer einzigen Zeile Javascript: - jQuery('#uhrcontainer').uhr(); +```javascript +jQuery('#uhrcontainer').uhr(); +``` Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst: @@ -76,7 +82,9 @@ Wie du diese Optionen bereits in der Konfiguration ändern kannst, verrät der n Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit - jQuery('div').uhr(); +```javascript +jQuery('div').uhr(); +``` würde also jedes `
`-Element der Seite in eine Uhr umgewandelt. @@ -84,34 +92,40 @@ würde also jedes `
`-Element der Seite in eine Uhr umgewandelt. ------------------- Der uhr()-Methode kann ein Options-Objekt mitgegeben werden: - jQuery('#uhrcontainer').uhr({ - status: 'on', // 'on' (default) oder 'off' - theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets) - language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (je nach eingebundenen Sprachdateien) - mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an - // 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an - 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 - controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt - // false: Die Bedienelemente werden nicht angezeigt - autoresize: true, // true (default): Die Uhr passt ihre Grösse dynamisch an - // false: Die Uhr behält ihre anfängliche Grösse - cookiePath: undefined // Gibt den Cookie-Pfad an. Ist normalerweise nicht definiert; in diesem Fall wird der Pfad der Datei benutzt, welche die Uhr anzeigt. Kann für spezielle Zwecke aber explizit gesetzt werden. - }); +```javascript +jQuery('#uhrcontainer').uhr({ + status: 'on', // 'on' (default) oder 'off' + theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets) + language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (je nach eingebundenen Sprachdateien) + mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an + // 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an + 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 + controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt + // false: Die Bedienelemente werden nicht angezeigt + autoresize: true, // true (default): Die Uhr passt ihre Grösse dynamisch an + // false: Die Uhr behält ihre anfängliche Grösse + cookiePath: undefined // Gibt den Cookie-Pfad an. Ist normalerweise nicht definiert; in diesem Fall wird der Pfad der Datei benutzt, welche die Uhr anzeigt. Kann für spezielle Zwecke aber explizit gesetzt werden. +}); +``` 5. Sonderfunktionen ------------------- Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels - { - time: new Date() - } +```javascript +{ + 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. Beim Klick auf den On/Off-Schalter oder beim Wechsel der Sprache 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()); +```javascript +jQuery('#uhrcontainer').uhr("time", new Date()); +``` 6. Konfiguration über die URL -----------------------------