updated documentation
This commit is contained in:
parent
92abc8e15b
commit
ff4c90c673
2 changed files with 88 additions and 55 deletions
11
README.md
11
README.md
|
|
@ -34,7 +34,7 @@ Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-
|
|||
* uhr-fr.js
|
||||
* uhr-it.js
|
||||
|
||||
`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ").
|
||||
`uhr-de_CH_genau.js` ist eine Variante von Berndeutsch, bei der zur vollen Stunde zusätzlich das Wort "genau" angezeigt wird (also z.B. um 15:00 Uhr "ES ISCH GENAU DRÜ").
|
||||
|
||||
2. Uhr-Element im HTML-Dokument einfügen
|
||||
----------------------------------------
|
||||
|
|
@ -56,10 +56,11 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
|||
* Die Uhr ist eingeschaltet
|
||||
* Die Bedienelemente werden angezeigt
|
||||
* Die Uhr passt sich in der Grösse an, wenn das Elternelement seine Grösse ändert
|
||||
* Die Uhr zeigt die aktuelle Stunde und Minute
|
||||
|
||||
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten sowie Sprache und Farbe wechseln.
|
||||
Mit den Bedienelementen kannst du die Uhr ein- und ausschalten, zwischen Stunden/Minuten- oder Sekundenanzeige wechseln sowie Sprache und Farbe einstellen.
|
||||
|
||||
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
|
||||
Wie du diese Optionen ändern kannst, verrät der nächste Abschnitt.
|
||||
|
||||
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
||||
|
||||
|
|
@ -75,10 +76,12 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
|||
status: 'on', // 'on' (default) oder 'off'
|
||||
theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets)
|
||||
language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'en', 'fr' oder 'it' (je nach eingebundenen Sprachdateien)
|
||||
mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an
|
||||
// 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an
|
||||
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
||||
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
|
||||
// true: immer die angegebene Konfiguration verwenden
|
||||
controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
|
||||
controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt
|
||||
// false: Die Bedienelemente werden nicht angezeigt
|
||||
autoresize: true // true (default): Die Uhr passt ihre Grösse dynamisch an
|
||||
// false: Die Uhr behält ihre anfängliche Grösse
|
||||
|
|
|
|||
132
info/index.html
132
info/index.html
|
|
@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1"/>
|
||||
<link rel="stylesheet" type="text/css" href="../css/uhr.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../css/uhr-black.css" data-class="black"/>
|
||||
<link rel="stylesheet" type="text/css" href="../css/uhr-red.css" data-class="red"/>
|
||||
<link rel="stylesheet" type="text/css" href="info.css"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../resources/favicon.png"/>
|
||||
<script type="text/javascript" src="../lib/jquery-2.1.0.min.js"></script>
|
||||
|
|
@ -44,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>
|
||||
<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>
|
||||
</ol>
|
||||
|
|
@ -60,16 +62,16 @@ 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>
|
||||
|
||||
<h2 id="the-clock">Die Uhr<a href="#toc" class="toclink">Zum Inhalt</a></h2>
|
||||
<a onclick="go('../')" href="#">
|
||||
<div id="uhr1"></div>
|
||||
<div id="uhr1" style="display:inline-block"></div>
|
||||
<div id="uhr2" style="display:inline-block"></div>
|
||||
</a>
|
||||
|
||||
<h3 id="requirements">Benötigte Bibliotheken<a href="#toc" class="toclink">Zum Inhalt</a></h3>
|
||||
|
|
@ -84,9 +86,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<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 Inhalt</a></h4>
|
||||
<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
|
||||
<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" />
|
||||
|
|
@ -108,12 +112,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript" src="uhr-it.js"></script></code>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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/>
|
||||
|
|
@ -121,7 +127,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</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();
|
||||
|
|
@ -129,10 +136,10 @@ 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/>
|
||||
<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({
|
||||
width: '200px',
|
||||
theme: 'red'
|
||||
|
|
@ -143,40 +150,47 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
||||
<p>Es existieren die folgenden Konfigurationsoptionen:</p>
|
||||
<dl>
|
||||
<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.
|
||||
<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>.
|
||||
<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>.
|
||||
<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).
|
||||
<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.
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'100%'</code></dd>
|
||||
<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).
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'normal'</code></dd>
|
||||
<dt><code>status</code></dt>
|
||||
<dd>Der Anfangszustand der Uhr, entweder <code>'on'</code> oder <code>'off'</code>
|
||||
<br/>Typ: String
|
||||
<br/> Default: <code>'on'</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.
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'de_CH'</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. Welche Farben unterstützt werden, hängt davon ab, welche
|
||||
CSS-Dateien eingebunden werden.
|
||||
<br/>Typ: String
|
||||
<br/>Default: Farbe der ersten eingebundenen CSS-Datei
|
||||
</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).
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <code>false</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>.
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <code>true</code></dd>
|
||||
<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>.
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <code>true</code></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.
|
||||
<br/>Typ: String
|
||||
<br/>Default: <code>'100%'</code></dd>
|
||||
</dl>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
|
|
@ -186,23 +200,38 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
theme: 'black',
|
||||
controls: false,
|
||||
force: true,
|
||||
autoresize: false
|
||||
autoresize: false,
|
||||
mode: 'normal'
|
||||
});
|
||||
$('#uhr2').uhr({
|
||||
width: '200px',
|
||||
language: 'de_CH',
|
||||
theme: 'red',
|
||||
controls: false,
|
||||
force: true,
|
||||
autoresize: false,
|
||||
mode: 'seconds'
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
||||
</script>
|
||||
<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/>
|
||||
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>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>
|
||||
|
||||
<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 href="https://www.gnu.org/licenses/gpl-3.0">GNU GPL 3.0</a>. Und direkt hier:</p>
|
||||
<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>
|
||||
|
||||
|
|
@ -904,6 +933,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
may consider it more useful to permit linking proprietary applications with
|
||||
the library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License. But first, please read
|
||||
<<a href="http://www.gnu.org/philosophy/why-not-lgpl.html">http://www.gnu.org/philosophy/why-not-lgpl.html</a>>.</p>
|
||||
<<a href="http://www.gnu.org/philosophy/why-not-lgpl.html">http://www.gnu.org/philosophy/why-not-lgpl.html</a>>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue