j-FloatingBox

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Ondersteunt het donkere mode

Configuratie:

zindex {Number} een standaard z-index voor formulieren (de standaard: 10)

Methoden:

component.show(opt) toont een doos
- opt.id {String} verplicht - een doos identificator
- opt.element {HTML Element} verplicht - doelelement
  - Of u kunt een absolute positie gebruiken:
  - opt.x {Number}
  - opt.y {Number}
- opt.offsetX {Number} beïnvloedt offset X
- opt.offsetY {Number} beïnvloedt offset Y
- opt.align {String} align left (default), center of right
- opt.position {String} align top (default), bottom
- opt.minwidth {Number}
- opt.maxwidth {Number}
- opt.mouseleave {String} een link naar de methode, het wordt uitgevoerd wanneer de muis cursor de box function(e, close)} verlaat
- opt.autofocus {Boolean} probeert zich te richten op de eerste input/textarea
- opt.hide {String} een link naar de methode function(box_element)
- opt.show {String} een link naar de methode function(box_element)
- opt.autohide {Boolean} maakt het mogelijk om een doos te verbergen na het klikken op het
- opt.delay {Number} een eenvoudige vertraging voor rendering (default: 0)
- opt.scrolltop {Boolean} verwijdert de toppositie van de huidige offset Y (default: false)
- opt.url {String} optioneel, URL voor de inhoud
  - opt.path {String} Het zal alles vervangen ~PATH~ Versies in het gedownload template
  - opt.ID {String} Het zal alles vervangen ~ID~ Versies in het gedownload template
component.hide() verbergt de laatste open doos
component.hide([box_id]) verbergt de specifieke doos en al haar nestboxes
component.hide(true) verbergt alle dozen

Boxes

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

Configuratie:

init {String} is een link naar de methode, het wordt uitgevoerd wanneer de doos voor het eerst wordt geïnitieerd function(element)
reload {String} een link naar de methode function(element)
hide {String} een link naar de methode, het wordt uitgevoerd wanneer de doos gaat om te verbergen function(element)
scope {String} een aangepaste scope/plugin naam
zindex {Number} een aangepaste z-index voor deze doos

Gebruik het met <ui-component name="floatingbox">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>