Find a file
2014-08-21 16:50:31 +02:00
info added it layout and updated documentation and manifest.appcache 2014-06-28 22:50:42 +02:00
showcase added it layout and updated documentation and manifest.appcache 2014-06-28 22:50:42 +02:00
.gitignore erster entwurf einer sprachabhängigen inhaltsdefinition 2013-11-24 19:31:14 +01:00
.htaccess added files for v1.5.1 2013-11-19 16:55:01 +01:00
apple-touch-icon-precomposed.png new touch icon 2014-06-20 00:55:52 +02:00
COPYING GPL3 hinzugefügt und Lizenztext überall eingefügt 2013-11-27 11:12:50 +01:00
favicon.png added favicon 2014-01-11 22:09:52 +01:00
index.html added showcase 2014-06-28 15:52:48 +02:00
jquery-2.1.0.min.js updated jquery to 2.1.0 and jquery-ui to 1.10.4 2014-03-05 22:05:02 +01:00
jquery-cookie-1.4.0.js cleaned up the index.html and renamed jquery.cookie.js 2014-01-11 21:07:41 +01:00
jquery-ui-1.10.4.custom.min.js updated jquery to 2.1.0 and jquery-ui to 1.10.4 2014-03-05 22:05:02 +01:00
manifest.appcache fixed 24h bug 2014-06-28 23:46:12 +02:00
README.md added it layout and updated documentation and manifest.appcache 2014-06-28 22:50:42 +02:00
uhr-black.css nur INaktive buchstaben überschreiben im CSS 2013-11-28 11:11:23 +01:00
uhr-blue.css nur INaktive buchstaben überschreiben im CSS 2013-11-28 11:11:23 +01:00
uhr-de.js preparing to support languages that make a difference between AM and PM 2014-06-28 22:03:35 +02:00
uhr-de_CH.js preparing to support languages that make a difference between AM and PM 2014-06-28 22:03:35 +02:00
uhr-de_CH_genau.js preparing to support languages that make a difference between AM and PM 2014-06-28 22:03:35 +02:00
uhr-en.js fixed 24h bug 2014-06-28 23:46:12 +02:00
uhr-fr.js fixed 24h bug 2014-06-28 23:46:12 +02:00
uhr-green.css nur INaktive buchstaben überschreiben im CSS 2013-11-28 11:11:23 +01:00
uhr-it.js fixed 24h bug 2014-06-28 23:46:12 +02:00
uhr-pink.css added pink style 2014-06-27 13:43:35 +02:00
uhr-red.css nur INaktive buchstaben überschreiben im CSS 2013-11-28 11:11:23 +01:00
uhr-white.css weiss vereinfacht 2013-11-28 11:13:52 +01:00
uhr-yellow.css added yellow theme 2014-06-28 16:04:06 +02:00
uhr.css grösse lässt sich nun konfigurieren 2013-11-30 18:51:43 +01:00
uhr.js fixed 24h bug 2014-06-28 23:46:12 +02:00
uhr.woff added files for v1.5.1 2013-11-19 16:55:01 +01:00
VERSION added VERSION file 2014-08-21 16:50:31 +02:00

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-blue.css
    • uhr-green.css
    • uhr-red.css
    • uhr-white.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 ein, je nach dem, welche Sprachen deine Uhr unterstützen soll:
    • uhr-de_CH.js
    • uhr-de_CH_genau.js
    • uhr-de.js
    • uhr-en.js
    • uhr-fr.js
    • uhr-it.js

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Ü").

  1. Uhr-Element im HTML-Dokument einfügen

Erstelle ein leeres <div> mit einer ID:

<div id="uhrcontainer"></div>
  1. 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

Wie du diese Optionen ändern kannst, verrät der nächte 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.

  1. Weitere Optionen

Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:

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
	controls: true     // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
	                   // false: Die Bedienelemente werden nicht angezeigt
});
  1. Sonderfunktionen

Es gibt noch einen zusätzlichen Konfigurationsparameter. Mit

	{
		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/.