web/app-menu.git - Ulrich Hilger Code Repository

			@@ -1,14 +1,14 @@
			# app-menu

			Ein universelles Menü für Webanwendungen.
			Ein Menü für Webanwendungen.

			## Beschreibung

			Das app-menu ist eine Liste von Auswahlpunkten für eine Webanwendung. Der Benutzer kann aus ihnen wählen um Funktionen auszuführen oder ein weiteres Menü aufzurufen. Eine große Anzahl von Funktionsaufrufen kann auf hierarchisch verschachtelte Menüs verteilt werden, deren Beschreibungen vom app-menu dynamisch geladen werden.

			Menüinhalte werden während der Ausführung der Webanwendung aus Beschreibungen geformt, die in der JavaScript Object Notation (JSON) hinterlegt sind.
			Menüinhalte werden während der Ausführung der Webanwendung aus Beschreibungen geformt, die in der JavaScript Object Notation (JSON) hinterlegt sind. Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt.

			Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt.
			Mit der [Demo-Anwendung](/data/ulrich/demo/app-vorlage/) kann das app-menu direkt im Browser ausprobiert werden.

			## Einbau des app-menu in eine Webanwendung

			@@ -23,9 +23,9 @@

			Die obigen Schritte sind nachfolgend im Detail beschrieben.

			### Hinzufügen des Ordners `app-menu`
			### <a name="add-folder"></a>Hinzufügen des Ordners `app-menu`

			Damit eine Webanwendung das app-menu verwenden kann, muss der gesamte Ordner `app-menu` der Webanwendung mitgegeben werden. Für die weitere Beschreibung wird angenommen, dass der Ordner `app-menu` in einem Ordner `jslib` abgelegt wurde und dass eine Datei `index.html` den Einstiegspunkt in die Webanwendung bildet.
			Damit eine Webanwendung das app-menu verwenden kann, wird der Inhalt des Ordners `app-menu` der Webanwendung zugänglich gemacht. Für die weitere Beschreibung wird angenommen, dass der Ordner `app-menu` in einem Ordner `jslib` abgelegt wurde und dass eine Datei `index.html` den Einstiegspunkt in die Webanwendung bildet.

			```
			/webanwendung
			@@ -40,7 +40,7 @@

			### Einbinden der Abhängigkeiten

			Das app-menu verwendet die JavaScript-Bibliotheken jQuery und Mustache. Sie werden einer Webanwendung hinzugefügt, indem ihre Skripte wie folgt eingebunden werden.
			Das app-menu verwendet die JavaScript-Bibliotheken [jQuery](https://jquery.com) und [Mustache](https://github.com/janl/mustache.js). Sie werden einer Webanwendung hinzugefügt, indem ihre Skripte wie folgt eingebunden werden.

			```
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
			@@ -50,7 +50,7 @@

			### Einbinden der 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 sowie der Schaltfläche zum Ein- und Ausblenden des Menüs werden zwei Stylesheets eingebunden.

			```
			<link rel="stylesheet" type="text/css" href="jslib/app-menu/nav-toggle.css">
			@@ -59,13 +59,13 @@

			### 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
			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.
			Das app-menu zeigt dann an dieser Stelle die Schaltfläche zum Ein- und Ausblenden des Menüs an.

			### Einbinden des Skripts

			@@ -115,7 +115,9 @@

			Im Element `funktion` eines Menüeintrages wird ein Funktionsname notiert. Die so benannte Funktion wird aufgerufen, wenn das Menü gewählt wird. Eine solche Funktion darf keine Parameter erwarten.

			Für jedes Menü, das in der Webanwendung gezeigt werden soll, muss eine Beschreibung im oben angegebenen Format existieren. Menübeschreibungen können beispielsweise in einem Unterordner `menu` abgelegt und der Webanwendung beigegeben werden, wie es im Abschnitt Hinzufügen des Ordners app-menu weiter oben geschildert ist.
			Für jedes Menü, das in der Webanwendung gezeigt werden soll, muss eine Beschreibung im oben angegebenen Format existieren. Menübeschreibungen können beispielsweise in einem Unterordner `menu` abgelegt und der Webanwendung beigegeben werden, wie es weiter oben geschildert ist.

			Beispiele für Menübeschreibungen finden sich im [Code der Demo-Anwendung](/gitblit/tree/web!app-vorlage.git/master/menu).

			## Aufruf des Menüs

			@@ -125,11 +127,11 @@
			app_menu_init("menu/", "hauptmenue.json", "jslib/app-menu/app-menu.tpl", ".west");
			```

			Die Funktion zur Initialisierung bewirkt, dass eine Menüschaltfläche zum Ein- und Ausblenden von Menüs an der Stelle des Elements `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

			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.
			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.