j-FloatingBox

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

prend en charge le mode sombre

Configuration :

zindex {Number} un indice z par défaut pour les formulaires (defaut : 10)

Méthodes :

component.show(opt) montre une boîte
- opt.id {String} required - un identifiant de boîte
- opt.element {HTML Element} _requié__ - élément cible
  - Vous pouvez utiliser une position absolue :
  - opt.x {Number}
  - opt.y {Number}
- opt.offsetX {Number} affecte l'offset X
- opt.offsetY {Number} affecte l'offset Y
- opt.align {String} alignant left (defaut), center ou right
- opt.position {String} alignant top (defaut), bottom
- opt.minwidth {Number}
- opt.maxwidth {Number}
- opt.mouseleave {String} un lien vers la méthode, il est exécuté lorsque le cursor de souris quitte la boîte function(e, close)}
- opt.autofocus {Boolean} tente de se concentrer sur la première entrée/textarea
- opt.hide {String} un lien vers la méthode function(box_element)
- opt.show {String} un lien vers la méthode function(box_element)
- opt.autohide {Boolean} permet de cacher une boîte après le clic
- opt.delay {Number} un simple retard de rendu (défaut: 0)
- opt.scrolltop {Boolean} déduit la position supérieure de l'offset Y (defaut: false)
- opt.url {String} optionnel, adresse URL pour le contenu
  - opt.path {String} remplacera toutes les phrases ~PATH~ dans le modèle téléchargé
  - opt.ID {String} remplacera toutes les phrases ~ID~ dans le modèle téléchargé
component.hide() cache la dernière boîte ouverte
component.hide([box_id]) cache la boîte spécifique et toutes ses boîtes
component.hide(true) cache toutes les boîtes

Les boîtes

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

Configuration :

init {String} un lien vers la méthode, elle est exécutée lors de la première initialisation de la box function(element)
reload {String} un lien vers la méthode function(element)
hide {String} un lien vers la méthode, il est exécuté lorsque la boite va se cacher function(element)
scope {String} un nom de portée/plugin personnalisé
zindex {Number} un z-index personnalisé pour cette boîte

Utilisez-le avec <ui-component name="floatingbox">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>