# j-FloatingBox

> j-FloatingBox: Unterstützt den Dunkelmodus

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 798580dc0796b0648e0e2f42d8f3a60a2d153609e1cdc00d18acf9cf74fc3438
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- unterstützt den __Dark-Modus__

__Konfiguration__:

- `zindex {Number}` ein Standard-Z-Index für Formulare (Standard: `10`)

__Methoden__:

- `component.show(opt)` zeigt eine Box
	- `opt.id {String}` __required__ – eine Box-ID
	- `opt.element {HTML Element}` __required__ – Zielelement
		- oder Sie können die absolute Position verwenden:
		- `opt.x {Number}`
		- `opt.y {Number}`
	- `opt.offsetX {Number}` wirkt sich auf Offset X aus
	- `opt.offsetY {Number}` beeinflusst Offset Y
	- `opt.align {String}` richtet `left` (Standard), `center` oder `right` aus
	- `opt.position {String}` align `top` (Standard), `bottom`
	- `opt.minwidth {Number}`
	- `opt.maxwidth {Number}`
	- `opt.mouseleave {String}` ein Link zur Methode, sie wird ausgeführt, wenn der Mauszeiger das Feld `function(e, close)}` verlässt
	- `opt.autofocus {Boolean}` versucht, den ersten Eingabe-/Textbereich zu fokussieren
	- `opt.hide {String}` ein Link zur Methode `function(box_element)`
	- `opt.show {String}` ein Link zur Methode `function(box_element)`
	- `opt.autohide {Boolean}` ermöglicht das Ausblenden einer Box, nachdem darauf geklickt wurde
	- `opt.delay {Number}` eine einfache Verzögerung für das Rendern (Standard: `0`)
	- `opt.scrolltop {Boolean}` zieht die obere Scrollposition vom aktuellen Offset Y ab (Standard: `false`)
	- `opt.url {String}` optional, URL-Adresse für den Inhalt
		- `opt.path {String}` ersetzt alle `~PATH~`-Sätze in der heruntergeladenen Vorlage
		- `opt.ID {String}` ersetzt alle `~ID~`-Sätze in der heruntergeladenen Vorlage
- `component.hide()` verbirgt die letzte geöffnete Box
- `component.hide([box_id])` verbirgt die spezifische Box und alle darin verschachtelten Boxen
- `component.hide(true)` blendet alle Felder aus

### Boxen

```html
<div class="floatingbox" data-id="yourid" data-config="">
	Your content
</div>
```

__Konfiguration__:

- `init {String}` ein Link zur Methode, sie wird ausgeführt, wenn die Box zum ersten Mal initialisiert wird `function(element)`
- `reload {String}` ein Link zur Methode `function(element)`
- `hide {String}` ein Link zur Methode, die ausgeführt wird, wenn die Box `function(element)` ausblenden soll
- `scope {String}` ein benutzerdefinierter Bereich/Plugin-Name
- `zindex {Number}` ein benutzerdefinierter Z-Index für diese Box

Verwenden Sie es mit `<ui-component name="floatingbox">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<ui-component name="exec"></ui-component>
<ui-component name="floatingbox" config="zindex:10"></ui-component>

<!-- Form templates -->

<div class="floatingbox" data-id="1" style="width:200px">
	<div class="padding">
		<div>Box 1</div>
		<br />
		<br />
		<br />
	</div>
</div>

<div class="floatingbox" data-id="2" data-config="init:box2init">
	<div class="padding">
		<div>Box 2</div>
		<br />
		<br />
		<br />
		<span class="exec" data-exec="showbox" data-id="3" style="color:#2A6CEC;cursor:pointer;text-decoration:underline">Show box 3</span>
	</div>
</div>

<div class="floatingbox" data-id="3">
	<div class="padding">
		Box 3
	</div>
</div>

<!-- Executors -->

<div class="row">
	<div class="col-xs-4">
		<span class="exec" data-exec="showbox" data-id="1" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show box 1</span>
	</div>
	<div class="col-xs-4">
		<span class="exec" data-exec="showbox" data-id="2" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show box 2</span>
	</div>
	<div class="col-xs-4">
		<span class="exec" data-exec="showbox" data-id="3" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show box 3</span>
	</div>
</div>

<script>

	function showbox(el) {
		var opt = {};
		opt.element = el;
		opt.id = el.attrd('id');
		SETTER('floatingbox/show', opt);
	}

	function box2init(el) {
		console.log('Box 2 is initialized', el);
	}

</script>
```