| commit | author | age | ||
| b7c57a | 1 | # app-menu |
| U | 2 | |
| 3 | Ein universelles Menü für Webanwendungen. | |
| 4 | ||
| 5 | ## Beschreibung | |
| 6 | ||
| 7 | Das app-menu ist eine Sammlung aus JavaScript-Funktionen, die eine Liste von Auswahlpunkten aus einer Beschreibung in der JavaScript Object Notation (JSON) formen. Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt. | |
| 8 | ||
| 9 | ## Anwendung | |
| 10 | ||
| 11 | Das app-menu wird wie folgt in eigene Webanwendungen eingebaut. | |
| 12 | ||
| 13 | 1. Einbinden der Abhängigkeiten (jQuery und Mustache) | |
| 14 | 2. Einbinden der Stylesheets | |
| 15 | 3. Weitere Schritte | |
| 16 | ||
| 17 | Weiterer Text | |
| 18 | ||
| 19 | ||
| 20 | ||
| 21 | ||
| 22 | ## Einbinden von jQuery und Mustache | |
| 23 | ||
| 24 | ||
| 25 | ||
| 26 | ``` | |
| 27 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| 28 | <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> | |
| 29 | ``` | |
| 30 | 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. | |
| 31 | ||
| 32 | ## Einbinden des Stylesheets | |
| 33 | ||
| 34 | ||
| 35 | ||
| 36 | ``` | |
| 37 | <link rel="stylesheet" type="text/css" href="applib/app-menu/nav-toggle.css"> | |
| 38 | <link rel="stylesheet" type="text/css" href="applib/app-menu/app-menu.css"> | |
| 39 | ``` | |
| 40 | ||
| 41 | ||
| 42 | #### Einbinden des Skripts | |
| 43 | ``` | |
| 44 | <script src="applib/app-menu/app-menu.js"></script> | |
| 45 | ``` | |
| 46 | ||
| 47 | #### Aufruf des Menüs | |
| 48 | ``` | |
| 49 | app_menu_init("menu/", "hauptmenue.json", "applib/app-menu/app-menu.tpl", ".west"); | |
| 50 | ``` | |
| 51 | ||
| 52 | Parameter 1: Name des Unterverzeichnisses mit Menübeschreibungen | |
| 53 | Parameter 2: Name der Menübeschreibung, die zuerst angezeigt werden soll | |
| 54 | Parameter 3: Unterverzeichnis und Name der Menüvorlage für Mustache | |
| 55 | Parameter 4: Name des Selektors, der das Menü aufnehmen soll | |
| 56 | ||
| 57 | ### Menüvorlage | |
| 58 | ||
| 59 | 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 | |
| 60 | ||
| 61 | ``` | |
| 62 | { | |
| 63 | "menue": { | |
| 64 | "menuetitel": "Hauptmenü", | |
| 65 | "wurzel": true, | |
| 66 | "vorgaenger": { | |
| 67 | "vtitel": "", | |
| 68 | "vverweis": "" | |
| 69 | }, | |
| 70 | "inhalt": [ | |
| 71 | { | |
| 72 | "titel": "H Menüeintrag 1", | |
| 73 | "umenue": false, | |
| 74 | "funktion": "app_menu_test" | |
| 75 | }, | |
| 76 | { | |
| 77 | "titel": "H Menüeintrag 2", | |
| 78 | "umenue": true, | |
| 79 | "verweis": "untermenue-1.json" | |
| 80 | }, | |
| 81 | { | |
| 82 | "titel": "H Menüeintrag 3", | |
| 83 | "umenue": false, | |
| 84 | "funktion": "app_menu_test_2" | |
| 85 | } | |
| 86 | ] | |
| 87 | } | |
| 88 | } | |
| 89 | ``` | |
| 90 | ||
| 91 | 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. | |
| 92 | ||
| 93 | 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. | |
