# j-FloatingBox

> j-FloatingBox: támogatja a sötét módot

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 82d4ee27c614b3329bcfc1bf35a2ef2c1342ce140c72094ebc42cda390acfef2
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Támogatja a sötét módot

__konfiguráció__:

- `zindex {Number}` egy alapértelmezett z-index a formanyomtatványok (default: `10`)

__módszerek__:

- A `component.show(opt)` egy dobozot mutat
	- `opt.id {String}` _ szükséges_ - egy doboz azonosító
	- `opt.element {HTML Element}` _ szükséges_ - célelem
		- vagy abszolút pozíciót használhat:
		- `opt.x {Number}`
		- `opt.y {Number}`
	- `opt.offsetX {Number}` hatással van az offset X-re
	- `opt.offsetY {Number}` hatással van az offset Y
	- `opt.align {String}` align `left` (nézetes), `center` vagy `right`
	- `opt.position {String}` Alignálás `top` (Egy alaptörvény szerint `bottom`
	- `opt.minwidth {Number}`
	- `opt.maxwidth {Number}`
	- `opt.mouseleave {String}` egy link a módszerhez, akkor fut, amikor az egér kurzor elhagyja a `function(e, close)}` dobozot
	- A `opt.autofocus {Boolean}` megpróbálja összpontosítani az első input/textarea-t
	- A `opt.hide {String}` a `function(box_element)` módszerhez kapcsolódik
	- A `opt.show {String}` a `function(box_element)` módszerhez kapcsolódik
	- A `opt.autohide {Boolean}` lehetővé teszi, hogy egy doboz elrejtését kattintva
	- `opt.delay {Number}` egy egyszerű késés a rendereléshez (default: `0`)
	- `opt.scrolltop {Boolean}` az aktuális offset Y-től származik a csúcshelyzetből (default: `false`)
	- `opt.url {String}` opcionális, az URL-cím a tartalomhoz
		- A `opt.path {String}` helyettesíti az összes `~PATH~` mondatot a letöltött sablonban
		- A `opt.ID {String}` helyettesíti az összes `~ID~` mondatot a letöltött sablonban
- A `component.hide()` elrejtette az utolsó nyílt dobozot
- A `component.hide([box_id])` elrejti a konkrét dobozot és az összes szeletelt dobozát
- A `component.hide(true)` minden dobozot elrejti

### dobozok

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

__konfiguráció__:

- `init {String}` egy link a módszerhez, akkor fut be, amikor az első alkalommal kezdi meg a `function(element)`
- A `reload {String}` a `function(element)` módszerhez kapcsolódik
- `hide {String}` egy link a módszerre, akkor fut, amikor a doboz elrejti a `function(element)`
- `scope {String}` egy megadott térfogat/plugin név
- `zindex {Number}` egy speciális z-index erre a dobozra

Használja a `<ui-component name="floatingbox">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

```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>
```