172 lines
8 KiB
Markdown
172 lines
8 KiB
Markdown
# Bärneruhr
|
|
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 CSS-Datei im HTML-Dokument ein:
|
|
* dist/uhr.min.css
|
|
* Binde zusätzlich mindestens eine der folgenden CSS-Dateien im HTML ein, je nach dem, welche Farben deine Uhr unterstützen soll:
|
|
* dist/uhr-black.min.css
|
|
* dist/uhr-white.min.css
|
|
* dist/uhr-red.min.css
|
|
* dist/uhr-yellow.min.css
|
|
* dist/uhr-green.min.css
|
|
* dist/uhr-blue.min.css
|
|
* dist/uhr-pink.min.css
|
|
|
|
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
|
|
<link rel="stylesheet" type="text/css" href="dist/uhr-black.min.css" data-class="black" data-name="Schwarz" />
|
|
```
|
|
|
|
* 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.
|
|
Alternativ kannst Du auch direkt die benötigten Bibliotheken einbinden:
|
|
* jquery (getestet mit Version 3.4.1)
|
|
* jquery-ui (getestet mit Version 1.12.1)
|
|
* Von jquery-ui wird die Komponente 'widget' benötigt.
|
|
* jquery-cookie (getestet mit Version 1.4.1)
|
|
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ützten 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).
|
|
|
|
* Je nach dem, welche der obigen Dateien du eingebunden hast, kannst 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-pt.js (Portugiesisch)
|
|
|
|
`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
|
|
Erstelle ein leeres `<div>` mit einer ID:
|
|
|
|
```html
|
|
<div id="uhrcontainer"></div>
|
|
```
|
|
|
|
## 3. Uhr per Javascript konfigurieren
|
|
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
|
|
|
```javascript
|
|
jQuery('#uhrcontainer').uhr();
|
|
```
|
|
|
|
Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
|
|
|
* Breite ist 100% des Elternelements
|
|
* Farbe ist diejenige des ersten eingebundenen Theme-Stylesheets.
|
|
* Sprache ist Bärndütsch
|
|
* Die Uhr ist eingeschaltet
|
|
* Die Bedienelemente werden angezeigt
|
|
* Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert
|
|
* Die Uhr zeigt die aktuelle Stunde und Minute
|
|
|
|
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 bereits in der Konfiguration ändern kannst, verrät der nächste Abschnitt.
|
|
|
|
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
|
|
|
```javascript
|
|
jQuery('div').uhr();
|
|
```
|
|
|
|
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
|
|
|
|
## 4. Weitere Optionen
|
|
Der uhr()-Methode kann ein Options-Objekt mitgegeben 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
|
|
|
|
```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:
|
|
|
|
```javascript
|
|
jQuery('#uhrcontainer').uhr("time", new Date());
|
|
```
|
|
|
|
## 6. Konfiguration über die URL
|
|
Es ist möglich, die Uhr durch den Aufruf mit URL-Parametern zu konfigurieren. Dies übersteuert auch allfällig bereits in einem Cookie gespeicherte Einstellungen. Die Einstellungen werden für alle Uhr-Elemente übernommen, welche sich auf der Seite befinden. 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
|
|
* pt: Portugiesisch
|
|
* `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 beispielsweise 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
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|