j-FloatingBox

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Поддържат тъмния режим

Конфигуриране:

zindex {Number} е стандартният z-индекс за формуляри (предварително: 10)

Методи:

component.show(opt) показва кутия
- opt.id {String} необходим - идентификатор на кутия
- opt.element {HTML Element} необходим - целеви елемент
  - Можете да използвате абсолютна позиция:
  - opt.x {Number}
  - opt.y {Number}
- opt.offsetX {Number} влияе на X
- opt.offsetY {Number} влияе на offset Y
- opt.align {String} съвпадение left (предварително), center или right
- opt.position {String} съвпадение top (предварително), bottom
- opt.minwidth {Number}
- opt.maxwidth {Number}
- opt.mouseleave {String} е връзка към метода, тя се изпълнява, когато курсора на мишката напусне кутията function(e, close)}
- opt.autofocus {Boolean} се опитва да фокусира първия вход/текстерия
- opt.hide {String} е връзката към метода на function(box_element)
- opt.show {String} е връзката към метода на function(box_element)
- opt.autohide {Boolean} позволява да се скрие кутия след като кликнете върху нея
- opt.delay {Number} - еднократна закъснение за представяне (предварително: 0)
- opt.scrolltop {Boolean} отнема върха на позицията от текущия offset Y (предварително: false)
- opt.url {String} опция, URL адрес за съдържанието
  - opt.path {String} ще замени всички фрази на ~PATH~ в изтегления шаблон
  - opt.ID {String} ще замени всички фрази на ~ID~ в изтегления шаблон
component.hide() крие последната отворена кутия
component.hide([box_id]) крие конкретната кутия и всички нейни нежни кутии
component.hide(true) крие всички кутии

кутии

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

Конфигуриране:

init {String} е връзката към метода, тя се изпълнява, когато кутията се стартира за първи път function(element)
reload {String} е връзката към метода на function(element)
hide {String} е връзка към метода, тя се изпълнява, когато кутията ще се скрие function(element)
scope {String} - име за персонализиран обхват / плугин
zindex {Number} е специален z-индекс за тази кутия

Използвайте го с <ui-component name="floatingbox">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>