From 58f63c569a0d8cfdc58a05ffa9d91bffbf24b433 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Wed, 5 Mar 2014 22:59:02 +0100 Subject: [PATCH] more info, better structured --- info/index.html | 122 +++++++++++++++++++++++++++++++++++------------- info/info.css | 3 ++ 2 files changed, 93 insertions(+), 32 deletions(-) create mode 100644 info/info.css diff --git a/info/index.html b/info/index.html index 908818b..66bbec4 100644 --- a/info/index.html +++ b/info/index.html @@ -16,8 +16,8 @@ along with this program. If not, see . Die Zeit im Wort - Informationen - - + + @@ -29,24 +29,46 @@ along with this program. If not, see . + -

Die Zeit im Wort

-

Was soll das?

+

Die Zeit im Wort

+ +

Was soll das?

Hallo, Besucher!

Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt, wie spät es ist. Hier erfährt du, wie du sie selber auf deiner Website einbauen kannst. Denn das darfst du gerne tun, solange du dich dabei an die Regeln der Lizenz hältst.

+

Das interessiert mich nicht, ich will zurück zur grossen Uhr!

-

Die Uhr

+

Die Uhr

-

Benötigte Bibliotheken

+

Benötigte Bibliotheken

    -
  • jQuery (getestet mit Version 2.0.3)
    • -
  • jQuery-UI (getestet mit Version 1.10.3) mit folgenden Komponenten: +
  • jQuery (getestet mit Version 2.1.0)
    • +
  • jQuery-UI (getestet mit Version 1.10.4) mit folgenden Komponenten:
    • core
    • widget
      • @@ -54,34 +76,68 @@ along with this program. If not, see .
    • jQuery-cookie (getestet mit Version 1.4.0)
    -

    Einbinden in HTML

    -

    Konfiguration

    +

    Einbinden in HTML

    +

    Javascript- und CSS-Dateien im <head>

    +

    Füge folgende Zeilen im <head>-Tag deines HTML-Dokumentes ein:
    + <script type="text/javascript" src="jquery-2.1.0.min.js"></script> +<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script> +<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script> +<script type="text/javascript" src="uhr.js"></script> +<script type="text/javascript" src="uhr-de_CH.js"></script> +<script type="text/javascript" src="uhr-de.js"></script> +<script type="text/javascript" src="uhr-en.js"></script> +<link rel="stylesheet" type="text/css" href="uhr.css" /> +<link rel="stylesheet" type="text/css" href="uhr-black.css" /> +<link rel="stylesheet" type="text/css" href="uhr-blue.css" /> +<link rel="stylesheet" type="text/css" href="uhr-green.css" /> +<link rel="stylesheet" type="text/css" href="uhr-red.css" /> +<link rel="stylesheet" type="text/css" href="uhr-white.css" /> +

    +

    Uhr-Element auf der Seite

    +

    Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <div>-Element:
    + <div id="meine-uhr"></div> +

    +

    Uhr initialisieren

    +

    Definiere im HTML-Dokument (<head> oder <body>) ein Javascript-Snippet, um die Uhr zu initialisieren:
    + <script type="text/javascript"> + jQuery(document).ready(function() { + jQuery('#meine-uhr').uhr(); + }); +</script> +

    +

    Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche sprache, schwarzer Hintergrund, eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der .uhr()-Methode als JSON-Objekt übergeben, beispielsweise so:
    + jQuery('#uhr').uhr({ + width: '200px', + theme: 'red' +}); +

    +

    Konfiguration

    Es existieren die folgenden Konfigurationsoptionen:

    -
    width
    -
    Die Breite der Uhr als CSS-String, z.B. '50%', '120px' oder '2.8em'. Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer Quadratisch ist. +
    width
    +
    Die Breite der Uhr als CSS-String, z.B. '50%', '120px' oder '2.8em'. Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer Quadratisch ist.
    Typ: String -
    Default: '100%'
    -
    status
    -
    Der Anfangszustand der Uhr, entweder 'on' oder 'off' +
    Default: '100%'
    +
    status
    +
    Der Anfangszustand der Uhr, entweder 'on' oder 'off'
    Typ: String -
    Default: 'on'
    -
    language
    -
    Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstütz werden, hängt davon ab, welche Sprachdateien eingebunden werden. Bis anhin unterstütze Sprachen umfassen 'de_CH' (Berndeutsch), 'de' (Hochdeutsch) und 'en' (Englisch). +
    Default: 'on'
    +
    language
    +
    Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstütz werden, hängt davon ab, welche Sprachdateien eingebunden werden. Bis anhin unterstütze Sprachen umfassen 'de_CH' (Berndeutsch), 'de' (Hochdeutsch) und 'en' (Englisch).
    Typ: String -
    Default: 'de_CH'
    -
    theme
    -
    Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit 'black' (schwarz), 'red' (rot), 'blue' (blau), 'green' (grün) und 'white' (weiss). +
    Default: 'de_CH'
    +
    theme
    +
    Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit 'black' (schwarz), 'red' (rot), 'blue' (blau), 'green' (grün) und 'white' (weiss).
    Typ: String -
    Default: 'black'
    -
    force
    -
    Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind true (Konfiguration überschreibt Cookie-Werte) oder false (Cookie-Werte haben Vorrang). +
    Default: 'black'
    +
    force
    +
    Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind true (Konfiguration überschreibt Cookie-Werte) oder false (Cookie-Werte haben Vorrang).
    Typ: boolean -
    Default: false
    -
    controls
    -
    Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind true oder false. +
    Default: false
    +
    controls
    +
    Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind true oder false.
    Typ: boolean -
    Default: true
    +
    Default: true
    -

    Created by fritteli, inspired by QLOCKTWO. - -

    Lizenzbestimmungen

    +

    Informationen

    +

    Programmiert von Manuel Friedli mit Inspiration von QLOCKTWO.
    + Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.

    +

    Der Quellcode ist frei zugänglich unter https://git.friedli.info/manuel/uhr

    +

    Lizenzbestimmungen

    Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert, weitergegeben und verändert werden. Die GNU GPL 3.0 findest Du unter folgendem Link: GNU GPL 3.0. Und direkt hier:

    -

    GNU GENERAL PUBLIC LICENSE

    +

    GNU GENERAL PUBLIC LICENSE

    Version 3, 29 June 2007

    Copyright © 2007 Free Software Foundation, Inc. diff --git a/info/info.css b/info/info.css new file mode 100644 index 0000000..bd16fff --- /dev/null +++ b/info/info.css @@ -0,0 +1,3 @@ +code { + white-space: pre; +}