Find a file
2014-01-11 23:16:59 +01: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
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 go back to standard behavior for index.html: one simple Bärneruhr 2014-01-11 23:16:20 +01:00
jquery-2.0.3.min.js added files for v1.5.1 2013-11-19 16:55:01 +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.3.custom.min.js jQuery-Plugin ist nun mit jQuery UI widget builder (oder wie das heisst) implementiert. viel schöner!!! 2014-01-11 20:56:21 +01:00
manifest.appcache time() funktion implementiert; damit kann eine fixe zeit gesetzt werden. noch nicht ganz ausgereift. 2014-01-11 22:54:46 +01:00
README.md updated readme 2014-01-11 23:16:59 +01: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 jQuery-Plugin ist nun mit jQuery UI widget builder (oder wie das heisst) implementiert. viel schöner!!! 2014-01-11 20:56:21 +01:00
uhr-de_CH.js jQuery-Plugin ist nun mit jQuery UI widget builder (oder wie das heisst) implementiert. viel schöner!!! 2014-01-11 20:56:21 +01:00
uhr-en.js jQuery-Plugin ist nun mit jQuery UI widget builder (oder wie das heisst) implementiert. viel schöner!!! 2014-01-11 20:56:21 +01:00
uhr-green.css nur INaktive buchstaben überschreiben im CSS 2013-11-28 11:11:23 +01: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.css grösse lässt sich nun konfigurieren 2013-11-30 18:51:43 +01:00
uhr.js time() funktion implementiert; damit kann eine fixe zeit gesetzt werden. noch nicht ganz ausgereift. 2014-01-11 22:54:46 +01:00
uhr.woff added files for v1.5.1 2013-11-19 16:55:01 +01: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 Javascript-Dateien im HTML-Dokument ein:
    • jquery-2.0.3.min.js (Falls nicht bereits vorhanden)
    • jquery-ui-1.10.3.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.js
    • uhr-en.js
  • Binde folgende CSS-Dateien im HTML-Dokument ein:
    • uhr.css
    • uhr-black.css
    • uhr-blue.css
    • uhr-green.css
    • uhr-red.css
    • uhr-white.css
  • Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden.
  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 Schwarz
  • Sprache ist Bärndütsch
  • Die Uhr ist eingeschaltet

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
});
  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. Mit dem On/Off-Schalter 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/.