updated README.md to reflect the latest changes; also added new
paragraph about the URL parameter configuration, which was forgotten in the previous releaseupdated README.md to reflect the latest changes; also added new paragraph about the URL parameter configuration, which was forgotten in the previous release..
This commit is contained in:
parent
0c7aebc200
commit
1eb733b069
73
README.md
73
README.md
|
|
@ -21,23 +21,31 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
|
|||
<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" />
|
||||
|
||||
* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
|
||||
* jquery-2.1.0.min.js (Falls nicht bereits vorhanden)
|
||||
* jquery-ui-1.10.4.custom.min.js (Falls nicht bereits vorhanden)
|
||||
* dist/libs.min.js: Dies enthält die minifizierten Versionen von jQuery, jQuery-UI (mit den Komponenten `code` und `widget`) und jQuery-Cookie.
|
||||
Alternativ kannst Du auch direkt die benötigten Bibliotheken einbinden:
|
||||
* jquery (getestet mit Version 2.1.0)
|
||||
* jquery-ui (getestet mit Version 1.10.4)
|
||||
* 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 nach uhr.js ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
|
||||
* uhr-de_CH.js (Berndeutsch)
|
||||
* uhr-de_CH_genau.js (Berndeutsch, siehe unten)
|
||||
* uhr-de.js (Deutsch)
|
||||
* uhr-dk.js (Dänisch)
|
||||
* uhr-en.js (Englisch)
|
||||
* uhr-es.js (Spanisch)
|
||||
* uhr-fr.js (Französisch)
|
||||
* uhr-it.js (Italienisch)
|
||||
* uhr-nl.js (Niederländisch)
|
||||
* jquery-cookie (getestet mit Version 1.4.0)
|
||||
Je nach dem, in welchen Sprachen du die Uhr verwenden willst, noch eine der folgenden Dateien:
|
||||
* dist/jquery.uhr.complete.min.js: Enthält die Hauptdatei sowie alle unterstützden Sprachdateien
|
||||
* dist/jquery.uhr.base.min.js: Enthält die Hauptdatei sowie Bärndütsch (de_CH)
|
||||
* dist/jquery.uhr.main.min.js: Enthält ausschliesslich die Hauptdatei. Zusätzlich muss noch mindestens eine Sprachdatei eingebunden werden (siehe unten).
|
||||
|
||||
`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätzlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ").
|
||||
* Je nach dem, welche der obigen Dateien du eingebunden hast, muskannst du noch individuelle Sprachdateien einbinden. Im Einstellungsfenster der Uhr werden diese Sprachen dann in der Reihenfolge zur Auswahl angeboten, in welcher du sie eingebunden hast.
|
||||
* dist/jquery.uhr.langs.min.js: Enthält alle Sprachen
|
||||
* dist/jquery.uhr.baselangs.min.js: Enthält alle Sprachen bis auf Bärndütsch (de_CH), welche bereits in dist/jquery.uhr.base.min.js enthalten ist.
|
||||
* src/uhr-de_CH.js (Bärndütsch)
|
||||
* src/uhr-de_CH_genau.js (Bärndütsch, siehe unten)
|
||||
* src/uhr-de.js (Deutsch)
|
||||
* src/uhr-dk.js (Dänisch)
|
||||
* src/uhr-en.js (Englisch)
|
||||
* src/uhr-es.js (Spanisch)
|
||||
* src/uhr-fr.js (Französisch)
|
||||
* src/uhr-it.js (Italienisch)
|
||||
* src/uhr-nl.js (Niederländisch)
|
||||
|
||||
`src/uhr-de_CH_genau.js` ist eine Variante von Bärndütsch, bei der zur vollen Stunde zusätzlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ" anstelle von "ES ISCH DRÜ").
|
||||
|
||||
2. Uhr-Element im HTML-Dokument einfügen
|
||||
----------------------------------------
|
||||
|
|
@ -63,7 +71,7 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
|||
|
||||
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten, zwischen Stunden/Minuten- oder Sekundenanzeige wechseln sowie Sprache und Farbe einstellen.
|
||||
|
||||
Wie du diese Optionen ändern kannst, verrät der nächste Abschnitt.
|
||||
Wie du diese Optionen bereits in der Konfiguration ändern kannst, verrät der nächste Abschnitt.
|
||||
|
||||
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
||||
|
||||
|
|
@ -103,6 +111,39 @@ Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden:
|
|||
|
||||
jQuery('#uhrcontainer').uhr("time", new Date());
|
||||
|
||||
6. Konfiguration über die URL
|
||||
-----------------------------
|
||||
Es ist möglich, die Uhr durch den Aufruf mit URL-Parameters zu konfigurieren. Dies übersteuert auch allfällig bereits in einem Cookie gespeicherte Einstellungen. Folgende Parameter werden unterstützt, wenn du sie mit einem Hash (`#`) an die URL anhängst:
|
||||
* `l` oder `language`: Bestimmt die Sprache. Der Wert ist der Sprach-Code (abhängig von den eingebundenen Sprachdateien):
|
||||
* de_CH: Bärndütsch
|
||||
* de_CH_genau: Bärndütsch (mit "genau")
|
||||
* de: Deutsch
|
||||
* dk: Dänisch
|
||||
* en: Englisch
|
||||
* es: Spanisch
|
||||
* fr: Französisch
|
||||
* it: Italienisch
|
||||
* nl: Niederländisch
|
||||
* `t` oder `theme`: Bestimmt die Farbe der Uhr. Der Wert ist der Farb-Code (abhängig von den eingebundenen CSS-Dateien):
|
||||
* black: Schwarz
|
||||
* white: Weiss
|
||||
* red: Rot
|
||||
* yellow: Gelb
|
||||
* green: Grün
|
||||
* blue: Blau
|
||||
* pink: Pink
|
||||
* `m` oder `mode`: Bestimmt den Modus der Uhr. Mögliche Werte sind:
|
||||
* normal: Die Uhr zeit Stunde und Minute an
|
||||
* seconds: Die Uhr zeigt die Sekunden an
|
||||
* `s` oder `status`: Bestimmt den anfänglichen Zustand der Uhr.
|
||||
* on: Die Uhr ist eingeschaltet
|
||||
* off: Die Uhr ist ausgeschaltet
|
||||
Eine URL kann also beispielweise so aussehen:
|
||||
|
||||
http://example.com/uhr.html#l=fr&t=red&m=seconds&s=on
|
||||
|
||||
Dies zeigt dann die Uhr auf Französisch in Rot, im Sekunden-Modus und eingeschaltet.
|
||||
|
||||
Viel Spass!
|
||||
|
||||
A. Lizenzbestimmungen
|
||||
|
|
|
|||
Loading…
Reference in New Issue