| commit | author | age | ||
| b7c57a | 1 | # app-menu |
| U | 2 | |
| 3 | Ein universelles Menü für Webanwendungen. | |
| 4 | ||
| 5 | ## Beschreibung | |
| 6 | ||
| 39d472 | 7 | Das app-menu ist eine Liste von Auswahlpunkten für eine Webanwendung. Der Benutzer kann aus ihnen auswählen um Funktionen auszuführen oder ein weiteres Menü aufzurufen. Eine große Anzahl von Funktionsaufrufen kann auf hierarchisch verschachtelte Menüs verteilt werden. |
| U | 8 | |
| 9 | Menüinhalte werden aus einer Beschreibung in der JavaScript Object Notation (JSON) geformt, die während | |
| 10 | ||
| 11 | Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt. | |
| 12 | ||
| 13 | Die Auswahlpunkte des Menüs sind entweder Funktionen, die bei der Auswahl des Punkts ausgeführt werden oder Verweise auf ein weiteres Menü. Verweise auf ein anderes Menü können entweder zu einem über- oder einem untergeordneten Menü weisen. | |
| b7c57a | 14 | |
| U | 15 | ## Anwendung |
| 16 | ||
| 17 | Das app-menu wird wie folgt in eigene Webanwendungen eingebaut. | |
| 18 | ||
| 19 | 1. Einbinden der Abhängigkeiten (jQuery und Mustache) | |
| 20 | 2. Einbinden der Stylesheets | |
| 21 | 3. Weitere Schritte | |
| 22 | ||
| 23 | Weiterer Text | |
| 24 | ||
| 25 | ||
| 26 | ||
| 27 | ||
| 28 | ## Einbinden von jQuery und Mustache | |
| 29 | ||
| 30 | ||
| 31 | ||
| 32 | ``` | |
| 33 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| 34 | <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> | |
| 35 | ``` | |
| 36 | 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. | |
| 37 | ||
| 38 | ## Einbinden des Stylesheets | |
| 39 | ||
| 40 | ||
| 41 | ||
| 42 | ``` | |
| 43 | <link rel="stylesheet" type="text/css" href="applib/app-menu/nav-toggle.css"> | |
| 44 | <link rel="stylesheet" type="text/css" href="applib/app-menu/app-menu.css"> | |
| 45 | ``` | |
| 46 | ||
| 47 | ||
| 48 | #### Einbinden des Skripts | |
| 49 | ``` | |
| 50 | <script src="applib/app-menu/app-menu.js"></script> | |
| 51 | ``` | |
| 52 | ||
| 39d472 | 53 | #### Aufruf des Menüs |
| b7c57a | 54 | ``` |
| U | 55 | app_menu_init("menu/", "hauptmenue.json", "applib/app-menu/app-menu.tpl", ".west"); |
| 56 | ``` | |
| 57 | ||
| 58 | Parameter 1: Name des Unterverzeichnisses mit Menübeschreibungen | |
| 59 | Parameter 2: Name der Menübeschreibung, die zuerst angezeigt werden soll | |
| 60 | Parameter 3: Unterverzeichnis und Name der Menüvorlage für Mustache | |
| 61 | Parameter 4: Name des Selektors, der das Menü aufnehmen soll | |
| 62 | ||
| 63 | ### Menüvorlage | |
| 64 | ||
| 65 | Im Verzeichnis `applib/app-menu` befindet sich eine Vorlage für ein dynamisches Menü, das ein- und ausgeblendet werden kann und seine Inhalte von Beschreibungen in JSON erhält. Menüs werden dynamisch aus JSON-Strukturen erstellt, die ein Menü beschreiben. In dieser Form sind die Menübeschreibungen gut mit einem Serverdienst zu ersetzen. Eine Beschreibung sieht wie folgt aus | |
| 66 | ||
| 67 | ``` | |
| 68 | { | |
| 69 | "menue": { | |
| 70 | "menuetitel": "Hauptmenü", | |
| 71 | "wurzel": true, | |
| 72 | "vorgaenger": { | |
| 73 | "vtitel": "", | |
| 74 | "vverweis": "" | |
| 75 | }, | |
| 76 | "inhalt": [ | |
| 77 | { | |
| 78 | "titel": "H Menüeintrag 1", | |
| 79 | "umenue": false, | |
| 80 | "funktion": "app_menu_test" | |
| 81 | }, | |
| 82 | { | |
| 83 | "titel": "H Menüeintrag 2", | |
| 84 | "umenue": true, | |
| 85 | "verweis": "untermenue-1.json" | |
| 86 | }, | |
| 87 | { | |
| 88 | "titel": "H Menüeintrag 3", | |
| 89 | "umenue": false, | |
| 90 | "funktion": "app_menu_test_2" | |
| 91 | } | |
| 92 | ] | |
| 93 | } | |
| 94 | } | |
| 95 | ``` | |
| 96 | ||
| 97 | Der Schalter `wurzel` legt fest, ob noch ein übergeordnetes Menü dargestellt wird. Wenn ja (`wurzel=false`) wird in `vorgaenger.vverweis` der Name der Menübeschreibung und in `vorgaenger.vtitel` der Name, unter dem der Eintrag im Menü erscheinen soll angegeben. Ebenso legt der Schalter `umenue` fest, ob ein Untermenue dargestellt wird. Dann muss in `verweis` der Name der Menübeschreibung angegeben sein. | |
| 98 | ||
| 99 | 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. | |
