|
|
# HTML zu QUIQQER Controls
|
|
|
|
|
|
In den Templates werden über JavaScript verschiedene Control-Arten interpretiert.
|
|
|
Durch einfaches HTML wandelt QUIQQER bestimmte HTML Definitionen in schöne einfache QUIQQER Controls um.
|
|
|
|
|
|
**Button**
|
|
|
|
|
|
```html
|
|
|
<div class="btn-button" data-text="" data-image="" data-click="">
|
|
|
```
|
|
|
|
|
|
data-text = Legt den Text für den Button fest
|
|
|
data-image = Legt das Icon für den Button fest (FontAwesome)
|
|
|
data-click = JavaScript-Funktion die bei einem Klick ausgeführt
|
|
|
|
|
|
**Datum**
|
|
|
|
|
|
```html
|
|
|
<input type="date" name="" />
|
|
|
<input type="datetime" name="" />
|
|
|
```
|
|
|
|
|
|
**Gruppen Eingabe**
|
|
|
|
|
|
```html
|
|
|
<input type="text" class="groups" name="" />
|
|
|
```
|
|
|
|
|
|
**Benutzer und Gruppen Eingabe**
|
|
|
|
|
|
```html
|
|
|
<input type="text" data-qui="controls/usersAndGroups/Input" name="" />
|
|
|
```
|
|
|
|
|
|
**Benutzer Eingabe / Feld**
|
|
|
|
|
|
```html
|
|
|
<!-- Mehrer Benutzer -->
|
|
|
<input type="text" data-qui="controls/users/Input" name=""/>
|
|
|
|
|
|
<!-- nur ein Benutzer -->
|
|
|
<input type="text" data-qui="controls/users/Input" data-qui-options-max="1" name=""/>
|
|
|
|
|
|
```
|
|
|
|
|
|
### Media Bild
|
|
|
|
|
|
Media Input erlaubt eine Media-Auswahl.
|
|
|
|
|
|
```html
|
|
|
<input type="text" class="media-image" name="" />
|
|
|
```
|
|
|
|
|
|
Media Bild - zusätzlichen Input für **FontAwesome** Auswahl aktivieren:
|
|
|
```html
|
|
|
<input type="text" class="media-image" data-qui-options-cssclasses="1" name="" />
|
|
|
```
|
|
|
|
|
|
Media Bild - erlaubte **Dateitypen** definieren:
|
|
|
```html
|
|
|
<input type="text" class="media-image" data-qui-options-selectable_types="..." name="" />
|
|
|
<input type="text" class="media-image" data-qui-options-selectable_mimetypes="..." name="" />
|
|
|
```
|
|
|
|
|
|
**Media Ordner**
|
|
|
|
|
|
```html
|
|
|
<input type="text" class="media-folder" name="" />
|
|
|
```
|
|
|
|
|
|
**Projekt Seitentypen**
|
|
|
|
|
|
```html
|
|
|
<input type="text" class="project-types" name="" />
|
|
|
```
|
|
|
|
|
|
**Projekt Seiten**
|
|
|
|
|
|
```html
|
|
|
// select a project site
|
|
|
<input type="text" class="project-site" name="" />
|
|
|
|
|
|
// select a project site or type the internet address
|
|
|
<input type="text" class="project-site" data-external="1" name="" />
|
|
|
```
|
|
|
|
|
|
**Projekt Auswahl**
|
|
|
|
|
|
```html
|
|
|
<input type="text" class="project" name="" />
|
|
|
```
|
|
|
|
|
|
**CK Editor**
|
|
|
|
|
|
```html
|
|
|
// single editor (when language does not matter)
|
|
|
<input type="text" data-qui="controls/editors/Input" name="" />
|
|
|
|
|
|
// multi-editor for several languages
|
|
|
<input type="text" data-qui="controls/lang/ContentMultiLang" name="" />
|
|
|
```
|
|
|
|
|
|
**Sprach Auswahl**
|
|
|
|
|
|
```xml
|
|
|
<input conf="globals.standardLanguage" type="string" data-qui="controls/lang/Select">
|
|
|
```
|
|
|
|
|
|
**Sprachabhängige Setting (multilang input)**
|
|
|
|
|
|
```xml
|
|
|
<input conf="..." type="text" data-qui="controls/lang/InputMultiLang">
|
|
|
```
|
|
|
|
|
|
![image](uploads/f8a0ad31b75b7e10eef39e03dc5bda6d/image.png) |