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

update documentation

This commit is contained in:
Manuel Friedli 2014-06-28 13:57:10 +02:00
parent ee60105130
commit 4c1ea9e1cd
1 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
info/index.html
View File

@ -16,23 +16,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<html manifest="../manifest.appcache">
<head>
<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-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="../uhr.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>
<body>
<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>
<h3 id="include-in-html">Einbinden in HTML</h3>
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code>&lt;head&gt;</code></h4>
<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein:<br/>
<code>&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
<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-blue.css" data-class="blue" data-name="Blau" /&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-red.css" data-class="red" data-name="Rot" /&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-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.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" /&gt;</code>
&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;</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>
<h4 id="clock-element">Uhr-Element auf der Seite</h4>
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code>&lt;div&gt;</code>-Element:<br/>
<code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code>
@ -108,7 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
});
&lt;/script&gt;</code>
</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({
width: '200px',
theme: 'red'
@ -130,9 +126,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<br/>Typ: String
<br/>Default: <code>'de_CH'</code></dd>
<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/>Default: <code>'black'</code></dd>
<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
@ -144,12 +140,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</dl>
<script type="text/javascript">
(function($) {
var width = $(window).width();
var height = $(window).height();
var size = (width < height ? width : height) + 'px';
$('#uhr1').uhr({
width: '150px',
controls: false
width: '200px',
language: 'de_CH',
theme: 'black',
controls: false,
force: true
});
})(jQuery);
</script>