updated README.md to use syntax highlighting in the markdown
This commit is contained in:
parent
a261d807cc
commit
4ff55d967e
1 changed files with 37 additions and 23 deletions
60
README.md
60
README.md
|
|
@ -18,7 +18,9 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
|
||||||
|
|
||||||
Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel:
|
Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel:
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="dist/uhr-black.min.css" data-class="black" data-name="Schwarz" />
|
```html
|
||||||
|
<link rel="stylesheet" type="text/css" href="dist/uhr-black.min.css" data-class="black" data-name="Schwarz" />
|
||||||
|
```
|
||||||
|
|
||||||
* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
|
* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
|
||||||
* dist/libs.min.js: Dies enthält die minifizierten Versionen von jQuery, jQuery-UI (mit den Komponenten `code` und `widget`) und jQuery-Cookie.
|
* dist/libs.min.js: Dies enthält die minifizierten Versionen von jQuery, jQuery-UI (mit den Komponenten `code` und `widget`) und jQuery-Cookie.
|
||||||
|
|
@ -52,13 +54,17 @@ Je nach dem, in welchen Sprachen du die Uhr verwenden willst, noch eine der folg
|
||||||
----------------------------------------
|
----------------------------------------
|
||||||
Erstelle ein leeres `<div>` mit einer ID:
|
Erstelle ein leeres `<div>` mit einer ID:
|
||||||
|
|
||||||
<div id="uhrcontainer"></div>
|
```html
|
||||||
|
<div id="uhrcontainer"></div>
|
||||||
|
```
|
||||||
|
|
||||||
3. Uhr per Javascript konfigurieren
|
3. Uhr per Javascript konfigurieren
|
||||||
-----------------------------------
|
-----------------------------------
|
||||||
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
Initialisiere die Uhr mit einer einzigen Zeile Javascript:
|
||||||
|
|
||||||
jQuery('#uhrcontainer').uhr();
|
```javascript
|
||||||
|
jQuery('#uhrcontainer').uhr();
|
||||||
|
```
|
||||||
|
|
||||||
Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
|
||||||
|
|
||||||
|
|
@ -76,7 +82,9 @@ Wie du diese Optionen bereits in der Konfiguration ändern kannst, verrät der n
|
||||||
|
|
||||||
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
Es kann natürlich auch eine Collection von Elementen übergeben werden. Mit
|
||||||
|
|
||||||
jQuery('div').uhr();
|
```javascript
|
||||||
|
jQuery('div').uhr();
|
||||||
|
```
|
||||||
|
|
||||||
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
|
würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
|
||||||
|
|
||||||
|
|
@ -84,34 +92,40 @@ würde also jedes `<div>`-Element der Seite in eine Uhr umgewandelt.
|
||||||
-------------------
|
-------------------
|
||||||
Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
|
||||||
|
|
||||||
jQuery('#uhrcontainer').uhr({
|
```javascript
|
||||||
status: 'on', // 'on' (default) oder 'off'
|
jQuery('#uhrcontainer').uhr({
|
||||||
theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets)
|
status: 'on', // 'on' (default) oder 'off'
|
||||||
language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (je nach eingebundenen Sprachdateien)
|
theme: 'black', // 'black' (default), 'white', 'red', 'yellow', 'green', 'blue' oder 'pink' (je nach eingebundenen Theme-Stylesheets)
|
||||||
mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an
|
language: 'de_CH', // 'de_CH' (default), 'de_CH_genau', 'de', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (je nach eingebundenen Sprachdateien)
|
||||||
// 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an
|
mode: 'normal', // 'normal' (default): Die Uhr zeigt die aktuelle Zeit (Stunden und Minuten) in Worten an
|
||||||
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
// 'seconds': Die Uhr zeigt die aktuellen Sekunden als grosse Ziffern an
|
||||||
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
|
width: '100%', // eine CSS-Grössenangabe (default: 100%)
|
||||||
// true: immer die angegebene Konfiguration verwenden
|
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
|
||||||
controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt
|
// true: immer die angegebene Konfiguration verwenden
|
||||||
// false: Die Bedienelemente werden nicht angezeigt
|
controls: true, // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme-, Zeitmodus- und Sprachwähler) werden angezeigt
|
||||||
autoresize: true, // true (default): Die Uhr passt ihre Grösse dynamisch an
|
// false: Die Bedienelemente werden nicht angezeigt
|
||||||
// false: Die Uhr behält ihre anfängliche Grösse
|
autoresize: true, // true (default): Die Uhr passt ihre Grösse dynamisch an
|
||||||
cookiePath: undefined // Gibt den Cookie-Pfad an. Ist normalerweise nicht definiert; in diesem Fall wird der Pfad der Datei benutzt, welche die Uhr anzeigt. Kann für spezielle Zwecke aber explizit gesetzt werden.
|
// false: Die Uhr behält ihre anfängliche Grösse
|
||||||
});
|
cookiePath: undefined // Gibt den Cookie-Pfad an. Ist normalerweise nicht definiert; in diesem Fall wird der Pfad der Datei benutzt, welche die Uhr anzeigt. Kann für spezielle Zwecke aber explizit gesetzt werden.
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
5. Sonderfunktionen
|
5. Sonderfunktionen
|
||||||
-------------------
|
-------------------
|
||||||
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels
|
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels
|
||||||
|
|
||||||
{
|
```javascript
|
||||||
time: new Date()
|
{
|
||||||
}
|
time: new Date()
|
||||||
|
}
|
||||||
|
```
|
||||||
kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Beim Klick auf den On/Off-Schalter oder beim Wechsel der Sprache wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an.
|
kann die Uhr auf eine fixe Zeit eingestellt werden. Sie bleibt dann statisch und aktualisiert sich nicht, sondern zeigt immer diese Zeit an. Beim Klick auf den On/Off-Schalter oder beim Wechsel der Sprache wird dies allerdings rückgängig gemacht und die Uhr nimmt das Standardverhalten mit der aktuellen Systemzeit an.
|
||||||
|
|
||||||
Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden:
|
Die Zeit kann auch über einen Methodenaufruf dynamisch eingestellt werden:
|
||||||
|
|
||||||
jQuery('#uhrcontainer').uhr("time", new Date());
|
```javascript
|
||||||
|
jQuery('#uhrcontainer').uhr("time", new Date());
|
||||||
|
```
|
||||||
|
|
||||||
6. Konfiguration über die URL
|
6. Konfiguration über die URL
|
||||||
-----------------------------
|
-----------------------------
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue