app-menu

Ein universelles Menü für Webanwendungen.

Beschreibung

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.

Anwendung

Das app-menu wird wie folgt in eigene Webanwendungen eingebaut.

1. Einbinden der Abhängigkeiten (jQuery und Mustache)
2. Einbinden der Stylesheets
3. Weitere Schritte

Weiterer Text

Einbinden von jQuery und Mustache

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

Das obige Beispiel bindet jQuery und Mustache aus dem Content Delivery Network cdnjs ein. Stattdessen können die beiden JavaScript-Komponenten auch lokal ausgeliefert werden.

Einbinden des Stylesheets

<link rel="stylesheet" type="text/css" href="applib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="applib/app-menu/app-menu.css">

Einbinden des Skripts

<script src="applib/app-menu/app-menu.js"></script>

Aufruf des Menüs

app_menu_init("menu/", "hauptmenue.json", "applib/app-menu/app-menu.tpl", ".west");

Parameter 1: Name des Unterverzeichnisses mit Menübeschreibungen
Parameter 2: Name der Menübeschreibung, die zuerst angezeigt werden soll
Parameter 3: Unterverzeichnis und Name der Menüvorlage für Mustache
Parameter 4: Name des Selektors, der das Menü aufnehmen soll

Menüvorlage

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

{
  "menue": {
    "menuetitel": "Hauptmenü",
    "wurzel": true,
    "vorgaenger": {
      "vtitel": "",
      "vverweis": ""
    },
    "inhalt":  [
      {
        "titel": "H Menüeintrag 1",
        "umenue": false,
        "funktion": "app_menu_test"
      },
      {
        "titel": "H Menüeintrag 2",
        "umenue": true,
        "verweis": "untermenue-1.json"
      },
      {
        "titel": "H Menüeintrag 3",
        "umenue": false,
        "funktion": "app_menu_test_2"
      }
    ]
  }
}

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.

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.