j-ScrollPercentage

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componentul trebuie atașat la elementul care va fi ca un container de rulare. pentru întreaga fereastră utilizați elementul body.

Configurarea:

exec {String} Un link la funcția globală care este executată dacă procentajul este schimbat

Important: dacă exec nu este definită, atunci componenta va lega o valoare în conformitate cu path.

Utilizați-l cu <ui-component name="scrollpercentage">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

example.html

<ui-bind path="common.scroll" config="exec div:myProgress" style="border: 1px solid #D0D0D0;padding:2px" class="block"><div style="height:10px;background-color:#79B34C"></div></ui-bind>
<br />
<ui-component name="scrollpercentage" path="common.scroll" style="height:400px;overflow-y:scroll">
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
	<div>Text</div>
</ui-component>

<script>
	function myProgress(value, path, el) {
		el.css('width', value + '%');
	}
</script>