j-FloatingBox

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

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

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

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>