121 lines
5.3 KiB
Markdown
121 lines
5.3 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:
|
|
* uhr.css
|
|
* Binde zusätzlich mindestens eine der folgenden CSS-Dateien im HTML ein, je nach dem, welche Farben deine Uhr unterstützen soll:
|
|
* uhr-black.css
|
|
* uhr-white.css
|
|
* uhr-red.css
|
|
* uhr-yellow.css
|
|
* uhr-green.css
|
|
* uhr-blue.css
|
|
* uhr-pink.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:
|
|
|
|
<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)
|
|
* 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)
|
|
|
|
`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Ü").
|
|
|
|
2. Uhr-Element im HTML-Dokument einfügen
|
|
----------------------------------------
|
|
Erstelle ein leeres `<div>` mit einer ID:
|
|
|
|
<div id="uhrcontainer"></div>
|
|
|
|
3. Uhr per Javascript konfigurieren
|
|
-----------------------------------
|
|
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
|
|
|
jQuery('#uhrcontainer').uhr();
|
|
|
|
Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
|
|
|
* Breite ist 100% des Eltenelements
|
|
* 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 ändern kannst, verrät der nächste Abschnitt.
|
|
|
|
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
|
|
|
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:
|
|
|
|
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' oder 'nl' (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
|
|
});
|
|
|
|
5. Sonderfunktionen
|
|
-------------------
|
|
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels
|
|
|
|
{
|
|
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());
|
|
|
|
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/>.
|