updated info/index.html
This commit is contained in:
parent
5bed926072
commit
684f502cfd
1 changed files with 93 additions and 38 deletions
125
info/index.html
125
info/index.html
|
|
@ -50,6 +50,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#configuration">Konfiguration</a></li>
|
<li><a href="#configuration">Konfiguration</a></li>
|
||||||
|
<li><a href="#urlparams">Konfiguration über die URL</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#information">Informationen</a></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><head></code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei,
|
<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/>
|
dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
|
||||||
<code><link rel="stylesheet" type="text/css" href="uhr.css" />
|
<code><link rel="stylesheet" type="text/css" href="css/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="css/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="css/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="css/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="css/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="css/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="css/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" />
|
<link rel="stylesheet" type="text/css" href="css/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="dist/libs.min.js"></script>
|
||||||
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
|
<script type="text/javascript" src="dist/jquery.uhr.complete.min.js"></script></code>
|
||||||
<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></code>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die
|
<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
|
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>
|
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>
|
<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
|
<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>
|
||||||
|
|
||||||
<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der
|
<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.
|
ersten eingebundenen CSS-Datei (im Beispiel also Schwarz), eingeschaltet, Stunden/Minuten-Modus, Breite
|
||||||
Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben
|
100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im
|
||||||
konfigurieren. Die Konfiguration wird der <code>.uhr()</code>-Methode als JSON-Objekt übergeben,
|
folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der <code>.uhr()</code>-Methode als
|
||||||
beispielsweise so:<br/>
|
JSON-Objekt übergeben, beispielsweise so:<br/>
|
||||||
<code>jQuery('#meine-uhr').uhr({
|
<code>jQuery('#meine-uhr').uhr({
|
||||||
width: '200px',
|
width: '200px',
|
||||||
theme: 'red'
|
theme: 'red'
|
||||||
|
|
@ -173,8 +160,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<br/>Typ: boolean
|
<br/>Typ: boolean
|
||||||
<br/>Default: <code>false</code></dd>
|
<br/>Default: <code>false</code></dd>
|
||||||
<dt><code>language</code></dt>
|
<dt><code>language</code></dt>
|
||||||
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstützt werden, hängt davon ab,
|
<dd>Die anfänglich ausgewählte Sprache als String. Mögliche Werte sind:
|
||||||
welche Sprachdateien eingebunden werden.
|
<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/>Typ: String
|
||||||
<br/>Default: <code>'de_CH'</code></dd>
|
<br/>Default: <code>'de_CH'</code></dd>
|
||||||
<dt><code>mode</code></dt>
|
<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/>Typ: String
|
||||||
<br/> Default: <code>'on'</code></dd>
|
<br/> Default: <code>'on'</code></dd>
|
||||||
<dt><code>theme</code></dt>
|
<dt><code>theme</code></dt>
|
||||||
<dd>Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche
|
<dd>Die anfänglich ausgewählte Farbe der Uhr. Abhängig davon, welche CSS-Dateien eingebunden wurden,
|
||||||
CSS-Dateien eingebunden werden.
|
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/>Typ: String
|
||||||
<br/>Default: Farbe der ersten eingebundenen CSS-Datei
|
<br/>Default: Farbe der ersten eingebundenen CSS-Datei
|
||||||
</dd>
|
</dd>
|
||||||
|
|
@ -220,9 +226,55 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
mode: 'seconds'
|
mode: 'seconds'
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</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 &. 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>
|
<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
|
<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
|
<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>
|
<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,
|
<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>
|
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>
|
<h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue