j-Scrollbar

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Személyre szabott szalagok. FONTOS: A jelenlegi tartalmat a relative pozícióban lévő két div elemek hozzáadásával rögzíti. Ez csak a jComponent v17-vel működik.

konfiguráció:

parent {String} kiválasztó egy szülőelem, tartalmazhat window (default: undefined)
visibleX {Boolean} mindig mutatja a horizontális csíkot (default: false)
visibleY {Boolean} mindig mutatja a függőleges csíkot (default: false)
offset {Boolean} hozzáadja a offset.top e elem (default: false)
reset {Boolean} helyreállítja a pozíciót, ha a path megváltozik (default: true)
margin {Number} a kijelzők minden típusának marginja (default: 0)
marginxs {Number} a XS kijelzők marginja (default: 0)
marginsm {Number} a SM kijelzők marginja (default: 0)
marginmd {Number} a MD kijelzők marginja (default: 0)
marginlg {Number} a LG kijelzők marginja (default: 0)
track {String} csak meghatározott útvonalakat követhet. FIELD1,FIELD2,FIELD3Az útvonalak összekapcsolódnak component.path

módszerek:

component.reset() helyreállítja a pozíciót a 0,0
component.scrollleft(val) forgatás X
component.scrolltop(val) forgatás és
A component.scrollright(val) a jobb oldalról forog
A component.scrollbottom(val) az alsó oldalról
component.scroll(x, y) forgatás X,Y
component.resize() újrahasznosítja a tartályt (a resize eseményekre automatikusan reagál)

Használja a <ui-component name="scrollbar">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>