j-Scrollbar

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Προσαρμοσμένες στροφές. ΣΗΜΑΝΤΙΚΟ: Συμπεριλαμβάνει το τρέχον περιεχόμενο με την προσθήκη δύο στοιχείων div με τη θέση relative. __Δουλεύει μόνο με το jComponent v17.

ΕΠΙΤΡΟΦΗ:

parent {String} επιλεκτής για ένα γονικό στοιχείο, μπορεί να περιέχει window (προεπιλεγμένο: undefined)
visibleX {Boolean} εμφανίζει πάντα οριζόντια γραμμή στροφής (προεπιλεγμένη: false)
visibleY {Boolean} εμφανίζει πάντα κάθετη γραμμή στροφής (προεπιλεγμένη: false)
offset {Boolean} προσθέτει το offset.top αυτού του στοιχείου (προεπιλεγμένο: false)
Το reset {Boolean} επαναφέρει τη θέση εάν το path αλλάξει (προεπιλεγμένο: true)
margin {Συνολικά} ένα περιθώριο για όλους τους τύπους οθόνων (προεπιλεγμένο: 0)
marginxs {Συνολικά} ένα περιθώριο για τις οθόνες XS (προεπιλεγμένο: 0)
marginsm {Συνολικά} ένα περιθώριο για τις οθόνες SM (προεπιλεγμένο: 0)
marginmd {Συνολικά} ένα περιθώριο για τις οθόνες MD (προεπιλεγμένο: 0)
marginlg {Συνολικά} ένα περιθώριο για τις οθόνες LG (προεπιλεγμένο: 0)
track {String} μπορεί να παρακολουθεί μόνο ορισμένους δρόμους, για παράδειγμα, FIELD1,FIELD2,FIELD3, οι δρόμοι θα συνδέονται με το component.path

Μέθοδοι:

Το component.reset() επαναφέρει τη θέση στο 0,0
component.scrollleft(val) Σκρόλος X
component.scrolltop(val) Σκάλες Y
component.scrollright(val) στροφές X από την δεξιά πλευρά
component.scrollbottom(val) στροφές Y από την κάτω πλευρά
component.scroll(x, y) στρογγυλοποιεί X, Y
component.resize() αναζωογονεί το δοχείο (αποδίδει αυτόματα σε γεγονότα resize)

Χρησιμοποιήστε το με <ui-component name="scrollbar">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>