j-FloatingBox

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

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

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

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>