added danish translation and updated documentation accordingly
This commit is contained in:
parent
78eea9ac1e
commit
6690ea4978
5 changed files with 150 additions and 54 deletions
|
|
@ -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,13 +196,14 @@ 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>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
(function ($) {
|
||||
$('#uhr1').uhr({
|
||||
width: '200px',
|
||||
language: 'de_CH',
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue