manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

updated info/index.html

Browse source
This commit is contained in:
Manuel Friedli 2015-01-18 16:44:28 +01:00
parent 5bed926072
commit 684f502cfd
1 changed files with 93 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
info/index.html
View file

@ -50,6 +50,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</ol>
</li>
<li><a href="#configuration">Konfiguration</a></li>
<li><a href="#urlparams">Konfiguration über die URL</a></li>
</ol>
</li>
<li><a href="#information">Informationen</a></li>
@ -93,27 +94,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei,
dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
<code>&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-yellow.css" data-class="yellow" data-name="Gelb" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /&gt;
&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-cookie-1.4.0.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-de_CH.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-de_CH_genau.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-de.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-dk.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-es.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-fr.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-it.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-nl.js"&gt;&lt;/script&gt;</code>
<code>&lt;link rel="stylesheet" type="text/css" href="css/uhr.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-green.css" data-class="green" data-name="Grün" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-blue.css" data-class="blue" data-name="Blau" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/uhr-pink.css" data-class="pink" data-name="Pink" /&gt;
&lt;script type="text/javascript" src="dist/libs.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="dist/jquery.uhr.complete.min.js"&gt;&lt;/script&gt;</code>
</p>
<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die
@ -121,9 +111,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
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>
<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
@ -142,10 +129,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</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/>
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 <code>.uhr()</code>-Methode als
JSON-Objekt übergeben, beispielsweise so:<br/>
<code>jQuery('#meine-uhr').uhr({
width: '200px',
theme: 'red'
@ -173,8 +160,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<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. Mögliche Werte sind:
<ul>
<li>de_CH</li>
<li>de_CH_genau</li>
<li>de</li>
<li>dk</li>
<li>en</li>
<li>es</li>
<li>fr</li>
<li>it</li>
<li>nl</li>
</ul>
<br/>Typ: String
<br/>Default: <code>'de_CH'</code></dd>
<dt><code>mode</code></dt>
@ -187,8 +184,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<br/>Typ: String
<br/> Default: <code>'on'</code></dd>
<dt><code>theme</code></dt>
<dd>Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche
CSS-Dateien eingebunden werden.
<dd>Die anfänglich ausgewählte Farbe der Uhr. Abhängig davon, welche CSS-Dateien eingebunden wurden,
werden folgende Werte unterstützt:
<ul>
<li>black</li>
<li>white</li>
<li>red</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>pink</li>
</ul>
<br/>Typ: String
<br/>Default: Farbe der ersten eingebundenen CSS-Datei
</dd>
@ -220,26 +226,75 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
mode: 'seconds'
});
})(jQuery);
</script>
<h2 id="urlparams">Konfiguration über die URL<a href="#toc" class="toclink">Zum Inhalt</a></h2>
<p>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 &amp;. Folgende Parameter werden
unterstützt:</p>
<dl>
<dt><code>l</code> oder <code>language</code></dt>
<dd>Gibt die Sprache an, in welcher die Uhr angezeigt werden soll. Mögliche Werte sind:
<ul>
<li>de_CH</li>
<li>de_CH_genau</li>
<li>de</li>
<li>dk</li>
<li>en</li>
<li>es</li>
<li>fr</li>
<li>it</li>
<li>nl</li>
</ul>
</dd>
<dt><code>t</code> oder <code>theme</code></dt>
<dd>Gibt die Farbe an, in welcher die Uhr angezeigt werden soll. Abhängig davon, welche CSS-Dateien
eingebunden wurden, werden folgende Werte unterstützt:
<ul>
<li>black</li>
<li>white</li>
<li>red</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>pink</li>
</ul>
</dd>
<dt><code>m</code> oder <code>mode</code></dt>
<dd>Legt fest, ob die Uhr Stunden/Minuten oder Sekunden anzeigt. Mögliche Werte sind <code>normal</code>
für Stunden/Minutenmodus und <code>seconds</code> für den Sekundenmodus.
</dd>
<dt><code>s</code> oder <code>status</code></dt>
<dd>Bestimmt, ob die Uhr eingeschaltet oder ausgeschaltet sein soll. Mögliche Werte sind <code>on</code>
(eingeschaltet) oder <code>off</code> (ausgeschaltet).
</dd>
</dl>
<p>Eine URL kann beispielsweise so aussehen, um eine gelbe Uhr in italienischer Sprache, Stunden/Minutenmodus
und eingeschaltet anzuzeigen:<br/>
<a href="http://bärneruhr.ch#l=it&t=yellow&m=normal&s=on">http://bärneruhr.ch#l=it&t=yellow&m=normal&s=on</a>
</p>
<h2 id="information">Informationen<a href="#toc" class="toclink">Zum Inhalt</a></h2>
<p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a
href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
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>
<p>Der Quellcode ist frei zugänglich unter <a
href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr</a>.</p>
href="https://gittr.ch/manuel/uhr">https://gittr.ch/manuel/uhr</a>.</p>
<p>Detaillierte Informationen zur Verwendung und Konfiguration findest du in der <a href="../README.md">README.md</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
href="https://www.gnu.org/licenses/gpl-3.0">GNU GPL 3.0</a>. Und direkt hier:</p>
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>