j-Scrollbar

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Dostosowane skrzydła. IMPORTANT: Własza aktualną zawartość poprzez dodanie dwóch elementów div z pozycją relative. __To działa tylko z jComponent v17.

Konfiguracja:

Wybór parent {String} dla elementu rodzinnego, może zawierać window (default: undefined)
visibleX {Boolean} zawsze pokazuje horyzontalny pasek skręcania (default: false)
visibleY {Boolean} zawsze wyświetla pionowy pasek skręcania (default: false)
offset {Boolean} dodaje offset.top tego elementu (default: false)
reset {Boolean} ponownie ustawia pozycję, jeśli path jest zmieniony (default: true)
margin {Liczba} marża dla wszystkich rodzajów wyświetlaczy (default: 0)
marginxs {Liczba} marża dla wyświetlaczy XS (default: 0)
marginsm {Liczba} marża dla wyświetlaczy SM (default: 0)
marginmd {Liczba} marża dla wyświetlaczy MD (default: 0)
marginlg {Liczba} marża dla wyświetlaczy LG (default: 0)
track {String} może śledzić tylko określone drogi np. FIELD1,FIELD2,FIELD3, drogi będą związane z component.path

Metody:

Pozycja component.reset() jest ponownie przekształcona w 0,0.
component.scrollleft(val) skrócenie X
component.scrolltop(val) skrócenie i
component.scrollright(val) skręca X z prawej strony
component.scrollbottom(val) skręca Y z dolnej strony
component.scroll(x, y) skrócenie X,Y
component.resize() rezygnuje z kontenera (reaguje automatycznie na wydarzenia resize)

Użyj go z <ui-component name="scrollbar">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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>