Ein universelles Menü für Webanwendungen
ulrich
2018-01-07 fb100c08f428b92b7844010cedafc5061fb13d37
Doku angepasst
1 files modified
23 ■■■■ changed files
README.md 23 ●●●● patch | view | raw | blame | history
README.md
@@ -16,8 +16,7 @@
1. Hinzufügen des Ordners `app-menu`
1. Einbinden der Abhängigkeiten (jQuery und Mustache)
1. Einbinden der Stylesheets
1. Hinzufügen einer Menüschaltfläche
1. Einbinden des Stylesheets
1. Herstellen der Menübeschreibungen
1. Aufruf der Funktion `app_menu_init`
@@ -48,24 +47,13 @@
```
Das obige Beispiel bindet jQuery und Mustache aus dem Content Delivery Network [cdnjs](https://cdnjs.com/) ein. Stattdessen können die beiden JavaScript-Komponenten auch lokal ausgeliefert werden.
### Einbinden der Stylesheets
### Einbinden des Stylesheets
Zur Regelung des Erscheinungsbildes von Menüs sowie der Schaltfläche zum Ein- und Ausblenden des Menüs werden zwei Stylesheets eingebunden.
Zur Regelung des Erscheinungsbildes von Menüs wird das Stylesheet eingebunden.
```
<link rel="stylesheet" type="text/css" href="jslib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="jslib/app-menu/app-menu.css">
```
### Hinzufügen einer Menüschaltfläche
Das app-menu wird über eine Schaltfläche Ein- und ausgeblendet, die vom app-menu selbst gesteuert wird. Sie wird in eine Webseite eingebaut, indem ein Element mit der ID `nav-toggle` hinzugefügt wird wie z.B. mit
```
<a id="nav-toggle" href="#"></a>
```
Das app-menu zeigt dann an dieser Stelle die Schaltfläche zum Ein- und Ausblenden des Menüs an.
### Einbinden des Skripts
@@ -124,14 +112,15 @@
Zu Beginn der Ausführung einer Webanwendung muss das app-menu mit folgendem Funktionsaufruf initialisiert werden.
```
app_menu_init("menu/", "hauptmenue.json", "jslib/app-menu/app-menu.tpl", ".west");
app_menu_init("menu/", "hauptmenue.json", "jslib/app-menu/app-menu.tpl", ".west", "5em");
```
Die Funktion zur Initialisierung bewirkt, dass eine Menüschaltfläche zum Ein- und Ausblenden von Menüs an der Stelle des Elements mit der ID `nav-toggle` erscheint. Beim Betätigen der Schaltfläche wird das Menü eingeblendet, das in der Beschreibung `hauptmenue.json` im Ordner `menu` beschrieben ist. Das Menü wird an der Stelle des Elements mit dem Klassennamen `west` dargestellt. NAchfolgend die Parameter der Funktion `app_menu_init` in der Übersicht.
Die Funktion zur Initialisierung bewirkt, dass eine Menüschaltfläche zum Ein- und Ausblenden von Menüs an der Stelle des Elements mit der ID `nav-toggle` erscheint. Beim Betätigen der Schaltfläche wird das Menü eingeblendet, das in der Beschreibung `hauptmenue.json` im Ordner `menu` beschrieben ist. Das Menü wird an der Stelle des Elements mit dem Klassennamen `west` dargestellt. Nachfolgend die Parameter der Funktion `app_menu_init` in der Übersicht.
1. Name des Unterverzeichnisses mit Menübeschreibungen
1. Name der Menübeschreibung, die zuerst angezeigt werden soll
1. Unterverzeichnis und Name der Vorlage für Mustache
1. Name des Selektors, der das Menü aufnehmen soll
1. Breite des Menüs
Der dritte Parameter bezeichnet eine Vorlage, die mit Hilfe von Mustache während der Ausführung der Webanwendung Menübeschreibungen in JSON nach HTML umwandelt. Die so bezeichnete Vorlage kann genutzt werden, um das HTML, aus dem ein Menü besteht, zu verändern.