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

125
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,9 +226,55 @@ 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
@ -235,10 +287,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<p>Der Quellcode ist frei zugänglich unter <a
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
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>