|
|
|
@ -45,7 +45,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
<li><a href="#requirements">Benötigte Bibliotheken</a></li>
|
|
|
|
|
<li><a href="#include-in-html">Einbinden in HTML</a>
|
|
|
|
|
<ol>
|
|
|
|
|
<li><a href="#js-and-css-in-head">Javascript- und CSS-Dateien im <code class="inline"><head></code></a>
|
|
|
|
|
<li><a href="#js-and-css-in-head">Javascript- und CSS-Dateien im
|
|
|
|
|
<code class="inline"><head></code></a>
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="#clock-element">Uhr-Element auf der Seite</a></li>
|
|
|
|
|
<li><a href="#initialize">Uhr initialisieren</a></li>
|
|
|
|
@ -62,9 +63,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
|
|
|
|
|
<p>Hallo, Besucher!</p>
|
|
|
|
|
|
|
|
|
|
<p>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 <a
|
|
|
|
|
href="#license">Lizenz</a> hältst.</p>
|
|
|
|
|
<p>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 <a href="#license">Lizenz</a> hältst.</p>
|
|
|
|
|
|
|
|
|
|
<p><a onclick="go('../')" href="#">Das interessiert mich nicht, ich will zurück zur grossen Uhr!</a></p>
|
|
|
|
|
|
|
|
|
@ -77,21 +78,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
<h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.1.0)</li>
|
|
|
|
|
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden Komponenten:
|
|
|
|
|
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden
|
|
|
|
|
Komponenten:
|
|
|
|
|
<ul>
|
|
|
|
|
<li>core</li>
|
|
|
|
|
<li>widget</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version 1.4.0)</li>
|
|
|
|
|
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version
|
|
|
|
|
1.4.0)
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<h3 id="include-in-html">Einbinden in HTML<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
|
|
|
|
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code><a href="#toc" class="toclink">Zum
|
|
|
|
|
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code><a href="#toc"
|
|
|
|
|
class="toclink">Zum
|
|
|
|
|
Inhalt</a></h4>
|
|
|
|
|
|
|
|
|
|
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die
|
|
|
|
|
CSS-Dateien <em>vor</em> den
|
|
|
|
|
Javascript eingebunden werden</strong>.<br/>
|
|
|
|
|
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei,
|
|
|
|
|
dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
|
|
|
|
|
<code><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" />
|
|
|
|
@ -107,6 +111,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
<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>
|
|
|
|
@ -115,22 +120,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die
|
|
|
|
|
Attribute <code>data-class</code> bzw. <code>data-name</code> definieren dabei die im Stylesheet 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.</p>
|
|
|
|
|
Attribute <code>data-class</code> bzw. <code>data-name</code> definieren dabei die im Stylesheet
|
|
|
|
|
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.</p>
|
|
|
|
|
|
|
|
|
|
<p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort <code
|
|
|
|
|
class="inline">genau</code> angezeigt wird (also z.B. um 15:00 Uhr <code class="inline">ES ISCH GENAU
|
|
|
|
|
DRÜ</code>).</p>
|
|
|
|
|
<p><code>uhr-de_CH_genau.js</code> ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das
|
|
|
|
|
Wort <code class="inline">genau</code> angezeigt wird (also z.B. um 15:00 Uhr
|
|
|
|
|
<code class="inline">ES ISCH GENAU DRÜ</code>).</p>
|
|
|
|
|
<h4 id="clock-element">Uhr-Element auf der Seite<a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
|
|
|
|
|
|
|
|
|
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code><div></code>-Element:<br/>
|
|
|
|
|
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres
|
|
|
|
|
<code><div></code>-Element:<br/>
|
|
|
|
|
<code><div id="meine-uhr"></div></code>
|
|
|
|
|
</p>
|
|
|
|
|
<h4 id="initialize">Uhr initialisieren<a href="#toc" class="toclink">Zum Inhalt</a></h4>
|
|
|
|
|
|
|
|
|
|
<p>Definiere im HTML-Dokument (<code><head></code> oder <code><body></code>) ein Javascript-Snippet, um die
|
|
|
|
|
Uhr zu initialisieren:<br/>
|
|
|
|
|
<p>Definiere im HTML-Dokument (<code><head></code> oder <code><body></code>) ein
|
|
|
|
|
Javascript-Snippet, um die Uhr zu initialisieren:<br/>
|
|
|
|
|
<code><script type="text/javascript">
|
|
|
|
|
jQuery(document).ready(function() {
|
|
|
|
|
jQuery('#meine-uhr').uhr();
|
|
|
|
@ -138,11 +144,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
</script></code>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>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 <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/>
|
|
|
|
|
<code>jQuery('#uhr').uhr({
|
|
|
|
|
<p>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 <code>.uhr()</code>-Methode als JSON-Objekt übergeben,
|
|
|
|
|
beispielsweise so:<br/>
|
|
|
|
|
<code>jQuery('#meine-uhr').uhr({
|
|
|
|
|
width: '200px',
|
|
|
|
|
theme: 'red'
|
|
|
|
|
});</code>
|
|
|
|
@ -153,29 +160,29 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
<p>Es existieren die folgenden Konfigurationsoptionen:</p>
|
|
|
|
|
<dl>
|
|
|
|
|
<dt><code>autoresize</code></dt>
|
|
|
|
|
<dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert, oder ob
|
|
|
|
|
sie immer die anfängliche Grösse behält. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
|
|
|
|
<dd>Gibt an, ob die Uhr ihre Grösse dynamisch anpassen soll, wenn das Elternelement seine Grösse ändert,
|
|
|
|
|
oder ob sie immer die anfängliche Grösse behält. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
|
|
|
|
<br/>Typ: boolean
|
|
|
|
|
<br/>Default: <code>true</code></dd>
|
|
|
|
|
<dt><code>controls</code></dt>
|
|
|
|
|
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden
|
|
|
|
|
sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
|
|
|
|
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt
|
|
|
|
|
werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
|
|
|
|
<br/>Typ: boolean
|
|
|
|
|
<br/>Default: <code>true</code></dd>
|
|
|
|
|
<dt><code>force</code></dt>
|
|
|
|
|
<dd>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 <code>true</code> (Konfiguration
|
|
|
|
|
überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Vorrang).
|
|
|
|
|
<dd>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 <code>true</code>
|
|
|
|
|
(Konfiguration überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Vorrang).
|
|
|
|
|
<br/>Typ: boolean
|
|
|
|
|
<br/>Default: <code>false</code></dd>
|
|
|
|
|
<dt><code>language</code></dt>
|
|
|
|
|
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab, welche
|
|
|
|
|
Sprachdateien eingebunden werden.
|
|
|
|
|
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab,
|
|
|
|
|
welche Sprachdateien eingebunden werden.
|
|
|
|
|
<br/>Typ: String
|
|
|
|
|
<br/>Default: <code>'de_CH'</code></dd>
|
|
|
|
|
<dt><code>mode</code></dt>
|
|
|
|
|
<dd>Der Zeit-Anzeigemodus, entweder <code>'normal'</code> (aktuelle Zeit in Worten anzeigen als "ES IST VIER
|
|
|
|
|
UHR") oder <code>'seconds'</code> (aktuelle Sekunden als grosse Ziffern anzeigen).
|
|
|
|
|
<dd>Der Zeit-Anzeigemodus, entweder <code>'normal'</code> (aktuelle Zeit in Worten anzeigen als "ES IST
|
|
|
|
|
VIER UHR") oder <code>'seconds'</code> (aktuelle Sekunden als grosse Ziffern anzeigen).
|
|
|
|
|
<br/>Typ: String
|
|
|
|
|
<br/>Default: <code>'normal'</code></dd>
|
|
|
|
|
<dt><code>status</code></dt>
|
|
|
|
@ -189,8 +196,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
<br/>Default: Farbe der ersten eingebundenen CSS-Datei
|
|
|
|
|
</dd>
|
|
|
|
|
<dt><code>width</code></dt>
|
|
|
|
|
<dd>Die Breite der Uhr als CSS-String, z.B. <code>'50%'</code>, <code>'120px'</code> oder <code>'2.8em'</code>.
|
|
|
|
|
Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer quadratisch ist.
|
|
|
|
|
<dd>Die Breite der Uhr als CSS-String, z.B. <code>'50%'</code>, <code>'120px'</code> oder
|
|
|
|
|
<code>'2.8em'</code>. Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer quadratisch
|
|
|
|
|
ist.
|
|
|
|
|
<br/>Typ: String
|
|
|
|
|
<br/>Default: <code>'100%'</code></dd>
|
|
|
|
|
</dl>
|
|
|
|
@ -222,17 +230,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
|
|
|
|
|
<p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a
|
|
|
|
|
href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
|
|
|
|
|
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.</p>
|
|
|
|
|
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.</p>
|
|
|
|
|
|
|
|
|
|
<p>Der Quellcode ist frei zugänglich unter <a href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr</a>.</p>
|
|
|
|
|
<p>Der Quellcode ist frei zugänglich unter <a
|
|
|
|
|
href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr</a>.</p>
|
|
|
|
|
|
|
|
|
|
<h2 id="license">Lizenzbestimmungen<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
|
|
|
|
|
|
|
|
|
<p>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: <a
|
|
|
|
|
<p>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: <a
|
|
|
|
|
href="https://www.gnu.org/licenses/gpl-3.0">GNU GPL 3.0</a>. Und direkt hier:</p>
|
|
|
|
|
|
|
|
|
|
<h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
|
|
|
|
|