... | ... | @@ -2,8 +2,9 @@ Wie erweitere ich das Menü während der Laufzeit (JavaScript) |
|
|
======
|
|
|
|
|
|
Um das Menü während der Laufzeit per JavaScript zu erweitern sind folgende Schritte notwendig:
|
|
|
|
|
|
1. Fügen sie in der [events.xml](Events-Xml) ein neues Event hinzu, welches `onAdminLoadFooter` ausgeführt wird. Ihre events.xml könnte dann wie folgt aussehen:
|
|
|
|
|
|
### Event Listener hinzufügen
|
|
|
Fügen Sie zunächst in der [events.xml](Events-Xml) ein neues Event hinzu, welches `onAdminLoadFooter` ausgeführt wird. Ihre [events.xml](Events-Xml) könnte dann wie folgt aussehen:
|
|
|
|
|
|
```xml
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
... | ... | @@ -12,15 +13,15 @@ Um das Menü während der Laufzeit per JavaScript zu erweitern sind folgende Sch |
|
|
</events>
|
|
|
```
|
|
|
|
|
|
2. Erstellen Sie die entsprechende Klasse und Funktion, auf die sie in Ihrer events.xml verwiesen haben.
|
|
|
In Ihrer Funktion machen Sie Folgendes:
|
|
|
`echo "<script src='" . URL_OPT_DIR . "quiqqer/MeinPaket/bin/initMenuEntries.js'></script>";`
|
|
|
Somit wird am Ende der Seite ein Skript Tag hinzugefügt, welches weiteren JavaScript Code von Ihnen lädt. Den Namen der zu ladenden JavaScript Datei (hier `initMenuEntries.js`) können Sie frei wählen.
|
|
|
Ihre php-Klasse könnte dann wie folgt aussehen:
|
|
|
/packages/quiqqer/MeinPaket/src/QUI/MeinKalender/EventHandler.php
|
|
|
### Event Listener Klasse erstellen
|
|
|
Erstellen Sie anschließend die entsprechende Klasse und Funktion, auf die Sie in Ihrer [events.xml](Events-Xml) verwiesen haben.
|
|
|
Diese sollte dann wie folgt aussehen:
|
|
|
|
|
|
|
|
|
```php
|
|
|
<?php
|
|
|
// Pfad der Datei: /packages/quiqqer/MeinPaket/src/QUI/MeinPaket/EventHandler.php
|
|
|
|
|
|
namespace QUI\MeinPaket;
|
|
|
|
|
|
class EventHandler
|
... | ... | @@ -31,3 +32,69 @@ class EventHandler |
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Somit wird am Ende der Seite ein Skript Tag hinzugefügt, welches weiteren JavaScript Code von Ihnen lädt. Den Namen der zu ladenden JavaScript Datei (hier `initMenuEntries.js`) können Sie frei wählen.
|
|
|
|
|
|
### Menü Einträge per JavaScript hinzufügen
|
|
|
Hierzu folgendes Beispiel:
|
|
|
|
|
|
```js
|
|
|
require([
|
|
|
|
|
|
'Menu',
|
|
|
'qui/controls/contextmenu/BarItem',
|
|
|
'qui/controls/contextmenu/Item'
|
|
|
|
|
|
], function (Menu, QUIBarMenuItem, QUIMenuItem)
|
|
|
{
|
|
|
"use strict";
|
|
|
|
|
|
// get the MenuBar
|
|
|
var MenuBar = Menu.getChildren(),
|
|
|
|
|
|
// Create new Main Menu Item
|
|
|
Test = new QUIBarMenuItem({
|
|
|
text: 'File'
|
|
|
}),
|
|
|
|
|
|
// Sub-Entry of new Item
|
|
|
Menu1 = new QUIMenuItem({
|
|
|
text: 'Menu 1',
|
|
|
icon: 'icon-home'
|
|
|
}),
|
|
|
|
|
|
// Sub-Entry of new Item
|
|
|
Menu2 = new QUIMenuItem({
|
|
|
text: 'Menu 2',
|
|
|
icon: 'icon-star'
|
|
|
});
|
|
|
|
|
|
// Append Sub-Item to Sub-Entry of new Item
|
|
|
Menu1.appendChild(new QUIMenuItem({
|
|
|
text: 'Menu 1 Sub',
|
|
|
icon: 'icon-home'
|
|
|
})
|
|
|
);
|
|
|
|
|
|
// append the sub-items to the new menu item
|
|
|
Test.appendChild(Menu1)
|
|
|
.appendChild(Menu2);
|
|
|
|
|
|
// append the new menu item to the menu bar
|
|
|
MenuBar.appendChild(Test);
|
|
|
});
|
|
|
```
|
|
|
|
|
|
`MenuBar` ist hier die Menü Leiste des Admin Bereichs.
|
|
|
Es wird ein neues Menü Item `Test` erstellt.
|
|
|
Dieses erhält zwei neue Untermenü-Items `Menu1` und `Menu2`.
|
|
|
Hierbei hat `Menu 1` noch einen weiteren Unterpunkt `Menu 1 Sub`
|
|
|
|
|
|
Dies sieht dann so aus:
|
|
|
![image](/uploads/35be946dedd8dc0cfa55d6906d63e583/image.png)
|
|
|
|
|
|
### Weitere Infos zu Menü Einträgen
|
|
|
Sämtliche Menü Items/Typen können unter
|
|
|
`/packages/quiqqer/qui/qui/controls/`
|
|
|
gefunden werden.
|
|
|
Dort wird in den `.md` Dateien genauer erklärt wie die einzelnen Typen zu verwenden sind. |