uhr/README.md

110 lines
4.4 KiB
Markdown
Raw Normal View History

Bärneruhr
=========
2014-01-11 23:16:59 +01:00
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-blue.css
* uhr-green.css
* uhr-red.css
* uhr-white.css
* uhr-pink.css
2014-06-28 14:13:47 +02:00
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:
2014-06-19 23:09:58 +02:00
* jquery-2.1.0.min.js (Falls nicht bereits vorhanden)
* jquery-ui-1.10.4.custom.min.js (Falls nicht bereits vorhanden)
2014-01-11 23:16:59 +01:00
* 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 ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
* uhr-de_CH.js
2014-06-28 22:12:59 +02:00
* uhr-de_CH_genau.js
* uhr-de.js
* uhr-en.js
2014-06-28 22:12:59 +02:00
* uhr-fr.js
* uhr-it.js
2014-06-28 22:12:59 +02:00
`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort "genau" angezeigt wird (also z.B. "ES ISCH GENAU DRÜ").
2. Uhr-Element im HTML-Dokument einfügen
----------------------------------------
Erstelle ein leeres `<div>` mit einer ID:
2014-01-11 23:16:59 +01:00
<div id="uhrcontainer"></div>
2014-06-19 23:09:58 +02:00
3. Uhr per Javascript konfigurieren
-----------------------------------
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
2014-01-11 23:16:59 +01:00
jQuery('#uhrcontainer').uhr();
2014-01-11 23:16:59 +01:00
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
2014-01-20 15:47:13 +01:00
* Die Bedienelemente werden angezeigt
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
2014-01-11 23:16:59 +01:00
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
jQuery('div').uhr();
2014-06-19 23:09:58 +02:00
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
2014-01-11 23:16:59 +01:00
4. Weitere Optionen
-------------------
2014-01-11 23:16:59 +01:00
Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
2014-01-11 23:16:59 +01:00
jQuery('#uhrcontainer').uhr({
status: 'on', // 'on' (default) oder 'off'
theme: 'black', // 'black' (default), 'red', 'blue', 'green' oder 'white'
language: 'de_CH', // 'de_CH' (default), 'de' oder 'en' (je nach eingebundenen Sprachdateien)
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
2014-01-20 15:47:13 +01:00
controls: true // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
2014-01-20 15:52:49 +01:00
// false: Die Bedienelemente werden nicht angezeigt
});
2013-11-30 19:29:18 +01:00
2014-01-11 23:16:59 +01:00
5. Sonderfunktionen
-------------------
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit
{
time: new Date()
}
2014-01-11 23:20:29 +01:00
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.
2014-01-11 23:16:59 +01:00
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
2013-11-30 19:29:18 +01:00
(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
2013-11-30 19:29:18 +01:00
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
2013-11-30 19:29:18 +01:00
along with this program. If not, see <http://www.gnu.org/licenses/>.