# j-FloatingPanel

> Du kan kombinera metoder med j-Shortcuts-komponenten.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sv
Content-SHA256: f450cbdedc58c55df722d0a80f24ddd17744d1bf7415cf62d7735518a2ae0066
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- singlar
- Stöd för custom scrollbars
- Stöd för _dark mode_

__Metoder__:

Metod: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.offsetX {Number}` alternativ, `x` offset (default: `0`)
- `options.offsetY {Number}` alternativ, `y` offset (default: `0`)
- `options.offsetWidth {Number}` alternativ, `width` offset (default: `0`)
- `options.minwidth {Number}` valfritt, en minimal bredd (default `200`)
- `options.maxwidth {Number}` valfritt, en maximal bredd (default `infinite`)
- `options.height {Number}` valfritt, en höjd (default: `200`)
- `options.callback(element) {Function}` utlöses när användaren klickar på elementet med `.selectable` klass
- `options.init {Function}` utlöses innan komponenten visas
- `options.close {Function}` valfritt, kan bestämma stängningen av panelen
- `options.align {String}` alternativ, `left` (default), `right` eller `center`
- `options.position {String}` valfritt, `top` (default), `bottom`
- `options.classname {String}` valfritt, en anpassad containerklass för alla objekt

Metod: `component.hide()`

__Html rendering__:

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

__RAW element rendering__:

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

__Importera innehåll__:

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

### Bra att veta

- Element med `selectable`-klassen kommer att vara valbara

__Metoder__:

- `component.up()` väljer föremål ovan
- `component.down()` väljer föremål nedan
- `component.select([el])` väljer objekt

Du kan kombinera metoder med `j-Shortcuts`-komponenten.

Använd den med `<ui-component name="floatingpanel">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

```html 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>
```