From 27ba54624bebd2943f5c8f8e376f429086eb52c0 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 30 Nov 2013 19:24:04 +0100 Subject: [PATCH] readme aktualisiert und uhr.js verschlankt --- README | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ uhr.js | 8 ++------ 2 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 README diff --git a/README b/README new file mode 100644 index 0000000..1b5f04a --- /dev/null +++ b/README @@ -0,0 +1,57 @@ +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
mit einer ID: +
+ +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! + diff --git a/uhr.js b/uhr.js index 8980718..c60ac76 100644 --- a/uhr.js +++ b/uhr.js @@ -21,7 +21,7 @@ function Uhr(clockarea, settings) { this.id = Uhr.id++; this.timer = null; this.currentTheme = null; - this.currentLayout = Uhr.layouts['undefined']; + this.currentLayout = {}; this.currentMinute = -1; this.initHTMLElements(clockarea, settings || {}); } @@ -226,6 +226,7 @@ Uhr.prototype.initLayoutSwitch = function(defaultValue, overrideCookie) { selectedLayout = defaultValue; } if (selectedLayout == undefined || selectedLayout == 'undefined') { + // FIXME not nice, hardcoded default-value selectedLayout = 'de_CH'; } this.layoutSwitch.val(selectedLayout); @@ -247,11 +248,6 @@ Uhr.prototype.initThemeSwitch = function(defaultValue, overrideCookie) { this.setTheme(selectedTheme); } -Uhr.register('undefined', { - language: 'Please choose your language', - values: [] -}); - /** * Hilfsklasse zum Rendern der Uhr. * @param layout Layout-Objekt, das gerendert werden soll.