From 684f502cfd21c36306e522225d736d758007d852 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sun, 18 Jan 2015 16:44:28 +0100 Subject: [PATCH] updated info/index.html --- info/index.html | 131 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 93 insertions(+), 38 deletions(-) diff --git a/info/index.html b/info/index.html index e750cd9..d7f405a 100644 --- a/info/index.html +++ b/info/index.html @@ -50,6 +50,7 @@ along with this program. If not, see .
  • Konfiguration
    • +
  • Konfiguration über die URL
  • Informationen
    • @@ -93,27 +94,16 @@ along with this program. If not, see .

    Füge folgende Zeilen im <head>-Tag deines HTML-Dokumentes ein. Beachte dabei, dass die CSS-Dateien vor den Javascript eingebunden werden.
    - <link rel="stylesheet" type="text/css" href="uhr.css" /> - <link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /> - <link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /> - <link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /> - <link rel="stylesheet" type="text/css" href="uhr-yellow.css" data-class="yellow" data-name="Gelb" /> - <link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /> - <link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /> - <link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /> - <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_CH_genau.js"></script> - <script type="text/javascript" src="uhr-de.js"></script> - <script type="text/javascript" src="uhr-dk.js"></script> - <script type="text/javascript" src="uhr-en.js"></script> - <script type="text/javascript" src="uhr-es.js"></script> - <script type="text/javascript" src="uhr-fr.js"></script> - <script type="text/javascript" src="uhr-it.js"></script> - <script type="text/javascript" src="uhr-nl.js"></script> + <link rel="stylesheet" type="text/css" href="css/uhr.css" /> + <link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz" /> + <link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss" /> + <link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot" /> + <link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb" /> + <link rel="stylesheet" type="text/css" href="css/uhr-green.css" data-class="green" data-name="Grün" /> + <link rel="stylesheet" type="text/css" href="css/uhr-blue.css" data-class="blue" data-name="Blau" /> + <link rel="stylesheet" type="text/css" href="css/uhr-pink.css" data-class="pink" data-name="Pink" /> + <script type="text/javascript" src="dist/libs.min.js"></script> + <script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script>

    Von den Stylesheets zwingend ist uhr.css und mindestens eines der Farbschema-Stylesheets. Die @@ -121,9 +111,6 @@ along with this program. If not, see . deklarierte Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei gewählt werden, die Style-Klasse muss mit der im Stylesheet definierten übereinstimmen.

    -

    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. um 15:00 Uhr - ES ISCH GENAU DRÜ).

    Uhr-Element auf der SeiteZum Inhalt

    Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres @@ -142,10 +129,10 @@ along with this program. If not, see .

    Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der - ersten eingebundenen CSS-Datei (im Beispiel also Schwarz), 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:
    + ersten eingebundenen CSS-Datei (im Beispiel also Schwarz), eingeschaltet, Stunden/Minuten-Modus, 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('#meine-uhr').uhr({ width: '200px', theme: 'red' @@ -173,8 +160,18 @@ along with this program. If not, see .
    Typ: boolean
    Default: false

    language
    -
    Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab, - welche Sprachdateien eingebunden werden. +
    Die anfänglich ausgewählte Sprache als String. Mögliche Werte sind: +
      +
    • de_CH
      • +
    • de_CH_genau
      • +
    • de
      • +
    • dk
      • +
    • en
      • +
    • es
      • +
    • fr
      • +
    • it
      • +
    • nl
      • +

    Typ: String
    Default: 'de_CH'
    mode
    @@ -187,8 +184,17 @@ along with this program. If not, see .
    Typ: String
    Default: 'on'
    theme
    -
    Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche - CSS-Dateien eingebunden werden. +
    Die anfänglich ausgewählte Farbe der Uhr. Abhängig davon, welche CSS-Dateien eingebunden wurden, + werden folgende Werte unterstützt: +
      +
    • black
      • +
    • white
      • +
    • red
      • +
    • yellow
      • +
    • green
      • +
    • blue
      • +
    • pink
      • +

    Typ: String
    Default: Farbe der ersten eingebundenen CSS-Datei
    @@ -220,26 +226,75 @@ along with this program. If not, see . mode: 'seconds' }); })(jQuery); - - + +

    Konfiguration über die URLZum Inhalt

    + +

    Es ist möglich, die Uhr über URL-Parameter zu konfigurieren. Der Parameterstring wird mit einem # + abgetrennt an die URL angehängt, einzelne Parameter trennst du mit &. Folgende Parameter werden + unterstützt:

    +
    +
    l oder language
    +
    Gibt die Sprache an, in welcher die Uhr angezeigt werden soll. Mögliche Werte sind: +
      +
    • de_CH
      • +
    • de_CH_genau
      • +
    • de
      • +
    • dk
      • +
    • en
      • +
    • es
      • +
    • fr
      • +
    • it
      • +
    • nl
      • +
    +
    +
    t oder theme
    +
    Gibt die Farbe an, in welcher die Uhr angezeigt werden soll. Abhängig davon, welche CSS-Dateien + eingebunden wurden, werden folgende Werte unterstützt: +
      +
    • black
      • +
    • white
      • +
    • red
      • +
    • yellow
      • +
    • green
      • +
    • blue
      • +
    • pink
      • +
    +
    +
    m oder mode
    +
    Legt fest, ob die Uhr Stunden/Minuten oder Sekunden anzeigt. Mögliche Werte sind normal + für Stunden/Minutenmodus und seconds für den Sekundenmodus. +
    +
    s oder status
    +
    Bestimmt, ob die Uhr eingeschaltet oder ausgeschaltet sein soll. Mögliche Werte sind on + (eingeschaltet) oder off (ausgeschaltet). +
    +
    +

    Eine URL kann beispielsweise so aussehen, um eine gelbe Uhr in italienischer Sprache, Stunden/Minutenmodus + und eingeschaltet anzuzeigen:
    + http://bärneruhr.ch#l=it&t=yellow&m=normal&s=on +

    +

    InformationenZum Inhalt

    Programmiert von Manuel Friedli mit Inspiration von QLOCKTWO.
    + href="http://www.qlocktwo.com/">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://gittr.ch/manuel/uhr.

    + href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr.

    + +

    Detaillierte Informationen zur Verwendung und Konfiguration findest du in der README.md. +

    LizenzbestimmungenZum Inhalt

    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:

    + 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