update documentation
This commit is contained in:
parent
ee60105130
commit
4c1ea9e1cd
1 changed files with 25 additions and 29 deletions
|
|
@ -16,23 +16,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<html manifest="../manifest.appcache">
|
<html manifest="../manifest.appcache">
|
||||||
<head>
|
<head>
|
||||||
<title>Die Zeit im Wort - Informationen</title>
|
<title>Die Zeit im Wort - Informationen</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="../uhr.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="../uhr-black.css" data-class="black" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="info.css" />
|
||||||
|
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
|
||||||
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
|
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
|
||||||
<script type="text/javascript" src="../jquery-ui-1.10.4.custom.min.js"></script>
|
<script type="text/javascript" src="../jquery-ui-1.10.4.custom.min.js"></script>
|
||||||
<script type="text/javascript" src="../jquery-cookie-1.4.0.js"></script>
|
<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.js"></script>
|
||||||
<script type="text/javascript" src="../uhr-de_CH.js"></script>
|
<script type="text/javascript" src="../uhr-de_CH.js"></script>
|
||||||
<script type="text/javascript" src="../uhr-de.js"></script>
|
|
||||||
<script type="text/javascript" src="../uhr-en.js"></script>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../uhr.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="../uhr-black.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="../uhr-blue.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="../uhr-green.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="../uhr-red.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="../uhr-white.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="info.css" />
|
|
||||||
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 id="main-title">Die Zeit im Wort</h1>
|
<h1 id="main-title">Die Zeit im Wort</h1>
|
||||||
|
|
@ -81,21 +75,23 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</ul>
|
</ul>
|
||||||
<h3 id="include-in-html">Einbinden in HTML</h3>
|
<h3 id="include-in-html">Einbinden in HTML</h3>
|
||||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code></h4>
|
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code></h4>
|
||||||
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein:<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><script type="text/javascript" src="jquery-2.1.0.min.js"></script>
|
<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-blue.css" data-class="blue" data-name="Blau" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="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="jquery-ui-1.10.4.custom.min.js"></script>
|
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
|
||||||
<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
|
<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.js"></script>
|
||||||
<script type="text/javascript" src="uhr-de_CH.js"></script>
|
<script type="text/javascript" src="uhr-de_CH.js"></script>
|
||||||
<script type="text/javascript" src="uhr-de.js"></script>
|
<script type="text/javascript" src="uhr-de.js"></script>
|
||||||
<script type="text/javascript" src="uhr-en.js"></script>
|
<script type="text/javascript" src="uhr-en.js"></script></code>
|
||||||
<link rel="stylesheet" type="text/css" href="uhr.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="uhr-black.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="uhr-blue.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="uhr-green.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="uhr-red.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="uhr-white.css" /></code>
|
|
||||||
</p>
|
</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>
|
||||||
<h4 id="clock-element">Uhr-Element auf der Seite</h4>
|
<h4 id="clock-element">Uhr-Element auf der Seite</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>
|
<code><div id="meine-uhr"></div></code>
|
||||||
|
|
@ -108,7 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
});
|
});
|
||||||
</script></code>
|
</script></code>
|
||||||
</p>
|
</p>
|
||||||
<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, schwarzer Hintergrund, 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({
|
<code>jQuery('#uhr').uhr({
|
||||||
width: '200px',
|
width: '200px',
|
||||||
theme: 'red'
|
theme: 'red'
|
||||||
|
|
@ -130,9 +126,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<br/>Typ: String
|
<br/>Typ: String
|
||||||
<br/>Default: <code>'de_CH'</code></dd>
|
<br/>Default: <code>'de_CH'</code></dd>
|
||||||
<dt><code>theme</code></dt>
|
<dt><code>theme</code></dt>
|
||||||
<dd>Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün) und <code>'white'</code> (weiss).
|
<dd>Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche CSS-Dateien eingebunden werden. Bis anhin unterstützte Farben sind zur Zeit <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün), <code>'white'</code> (weiss) und <code>'pink'</code> (pink).
|
||||||
<br/>Typ: String
|
<br/>Typ: String
|
||||||
<br/>Default: <code>'black'</code></dd>
|
<br/>Default: Farbe der ersten eingebundenen CSS-Datei</dd>
|
||||||
<dt><code>force</code></dt>
|
<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/>Typ: boolean
|
||||||
|
|
@ -144,12 +140,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
</dl>
|
</dl>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
(function($) {
|
(function($) {
|
||||||
var width = $(window).width();
|
|
||||||
var height = $(window).height();
|
|
||||||
var size = (width < height ? width : height) + 'px';
|
|
||||||
$('#uhr1').uhr({
|
$('#uhr1').uhr({
|
||||||
width: '150px',
|
width: '200px',
|
||||||
controls: false
|
language: 'de_CH',
|
||||||
|
theme: 'black',
|
||||||
|
controls: false,
|
||||||
|
force: true
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue