j-Scrollbar

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Scrollbars personalizzati. IMPORTANTE: Aggiunge il contenuto corrente aggiungendo due elementi di div con posizione relative. Funzione con jComponent v17 solo.

Configurazione:

parent {String} selettore per un elemento parentale, può contenere window (e per default è undefined)
visibleX {Boolean} mostra sempre la barra orizzontale (default: false)
visibleY {Boolean} mostra sempre la barra di scorrimento verticale (default: false)
offset {Boolean} aggiunge offset.top di questo elemento (default: false)
reset {Boolean} riprende la posizione se il path è cambiato (default: true)
margin {Numero} un margine per tutti i tipi di display (default: 0)
marginxs {Numero} un margine per le visualizzazioni XS (default: 0)
marginsm {Numero} un margine per le visualizzazioni SM (default: 0)
marginmd {Numero} un margine per le visualizzazioni MD (default: 0)
marginlg {Numero} un margine per le visualizzazioni LG (default: 0)
track {String} può tracciare solo percorsi definiti, ad esempio FIELD1,FIELD2,FIELD3, i percorsi saranno collegati a component.path

Metodi:

component.reset() ritorna alla posizione di 0,0
component.scrollleft(val) scorrere X
component.scrolltop(val) scorrere e
component.scrollright(val) scorrere X da destra
component.scrollbottom(val) scorrere Y dal basso
component.scroll(x, y) scorrere X, Y
Il contenitore component.resize() risiste (reagisce automaticamente agli eventi resize)

Utilizzare con <ui-component name="scrollbar">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>