j-Scrollbar

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Benutzerdefinierte Bildlaufleisten. WICHTIG: Der aktuelle Inhalt wird umschlossen, indem zwei verschachtelte div-Elemente mit der Position relative hinzugefügt werden. Es funktioniert nur mit jComponent v17.

Konfiguration:

parent {String}-Selektor für ein übergeordnetes Element, kann window enthalten (Standard: undefined)
visibleX {Boolean} zeigt immer eine horizontale Bildlaufleiste an (Standard: false)
visibleY {Boolean} zeigt immer eine vertikale Bildlaufleiste an (Standard: false)
offset {Boolean} fügt offset.top dieses Elements hinzu (Standard: false)
reset {Boolean} setzt die Position zurück, wenn path geändert wird (Standard: true)
margin {Number} ein Rand für alle Arten von Anzeigen (Standard: 0)
marginxs {Nummer} ein Rand für XS-Anzeigen (Standard: 0)
marginsm {Nummer} ein Rand für SM-Anzeigen (Standard: 0)
marginmd {Nummer} ein Rand für MD-Anzeigen (Standard: 0)
marginlg {Number} ein Rand für LG-Anzeigen (Standard: 0)
track {String} kann nur definierte Pfade verfolgen, z. B. FIELD1,FIELD2,FIELD3, Pfade werden mit component.path verknüpft

Methoden:

component.reset() setzt die Position auf 0,0 zurück
component.scrollleft(val) scrollt X
component.scrolltop(val) scrollt Y
component.scrollright(val) scrollt X von rechts
component.scrollbottom(val) scrollt Y von unten
component.scroll(x, y) scrollt X,Y
component.resize() ändert die Größe des Containers (er reagiert automatisch auf resize-Ereignisse)

Verwenden Sie es mit <ui-component name="scrollbar">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="scrollbar" style="background-color:rgba(100,100,100,0.05);height:200px;width:300px" class="hidden" data-jc-class="hidden">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</ui-component>