Merge branch 'feature/update-markdown' into 'develop'
updated README.md to use syntax highlighting in the markdown See merge request !46
This commit is contained in:
commit
a3cbfe8de5
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:
|
||||
|
||||
<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:
|
||||
* 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:
|
||||
|
||||
<div id="uhrcontainer"></div>
|
||||
```html
|
||||
<div id="uhrcontainer"></div>
|
||||
```
|
||||
|
||||
3. Uhr per Javascript konfigurieren
|
||||
-----------------------------------
|
||||
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:
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
jQuery('div').uhr();
|
||||
```javascript
|
||||
jQuery('div').uhr();
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
jQuery('#uhrcontainer').uhr({
|
||||
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', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (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-, 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
|
||||
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.
|
||||
});
|
||||
```javascript
|
||||
jQuery('#uhrcontainer').uhr({
|
||||
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', 'dk', 'en', 'es', 'fr', 'it', 'nl' oder 'pt' (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-, 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
|
||||
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
|
||||
-------------------
|
||||
Es gibt noch einen zusätzlichen Konfigurationsparameter. Mittels
|
||||
|
||||
{
|
||||
time: new Date()
|
||||
}
|
||||
```javascript
|
||||
{
|
||||
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.
|
||||
|
||||
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
|
||||
-----------------------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue