j-FloatingPanel

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

Синглът
Поддържайте персонализираните скалбарки
Поддържат тъмния режим

Методи:

Методът: component.show(options)

options.element {Element/jQuery Element}
options.offsetX {Number} опция, x отстъпка (дефолт: 0)
options.offsetY {Number} опция, y отстъпка (дефолт: 0)
options.offsetWidth {Number} опция, width отстъпка (дефолт: 0)
options.minwidth {Number} опция, минимална ширина (дефолт 200)
options.maxwidth {Number} опция, максимална ширина (дефолт infinite)
options.height {Number} опционално, височина (предварително: 200)
options.callback(element) {Function} се освобождава, когато потребителят кликне върху елемента с клас .selectable
options.init {Function} се освобождава, преди да се покаже компонента
options.close {Function} опционално, може да определи затварянето на панела
options.align {String} опционален, left (предварително), right или center
options.position {String} опционален, top (предварително), bottom
options.classname {String} опция, персонализиран контейнер клас за всички елементи

Методът: component.hide()

HTML рендериране:

var opt = {};
opt.html = 'Your HTML code';

Елементът на RAW:

var opt = {};
opt.html = YOUR_DOM_ELEMENT;
// IMPORTANT: if the FloatingBox will be closed, then the element will be moved to the previous parent.

Въвеждане на съдържание:

var opt = {};
opt.import = '/url/part.html';
// IMPORTANT: the content will be cached for the future usage

Добре е да се знае

Елементи с клас selectable ще бъдат селективни

Методи:

component.up() изберете елемент по-горе
component.down() избира елемента по-долу
component.select([el]) Избор на елемент

Можете да комбинирате методите с j-Shortcuts компонент.

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

example.html

<ui-component name="exec"></ui-component>
<ui-component name="floatingpanel"></ui-component>

<span class="exec" data-exec="showpanel" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show panel</span>

<script>

	function showpanel(el) {
		var opt = {};
		opt.element = el;
		opt.html = '<div class="padding">Custom content</div>';
		SETTER('floatingpanel/show', opt);
	}

</script>