j-FloatingPanel

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

singleton
admite barras de desplazamiento personalizadas
admite modo oscuro

Métodos:

Método: component.show(options)

options.element {Element/jQuery Element}
options.offsetX {Number} opcional, desplazamiento x (predeterminado: 0)
options.offsetY {Number} opcional, desplazamiento y (predeterminado: 0)
options.offsetWidth {Number} opcional, desplazamiento width (predeterminado: 0)
options.minwidth {Number} opcional, un ancho mínimo (por defecto 200)
options.maxwidth {Number} opcional, un ancho máximo (por defecto infinite)
options.height {Number} opcional, una altura (por defecto: 200)
options.callback(element) {Function} se activa cuando el usuario hace clic en el elemento con la clase .selectable.
options.init {Function} se activa antes de que se muestre el componente
options.close {Function} opcional, puede determinar el cierre del panel
options.align {String} opcional, left (predeterminado), right o center
options.position {String} opcional, top (predeterminado), bottom
options.classname {String} opcional, una clase de contenedor personalizada para todos los artículos

Método: component.hide()

Representación HTML:

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

Representación de elementos 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.

Importando contenido:

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

Es bueno saberlo

Los elementos con clase selectable serán seleccionables.

Métodos:

component.up() selecciona el elemento de arriba
component.down() selecciona el elemento a continuación
component.select([el]) selecciona el artículo

Puede combinar métodos con el componente j-Shortcuts.

Úselo con <ui-component name="floatingpanel">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>