j-ScrollPercentage

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente muss an das Element angehängt werden, das als Scroll-Container dient. Für das gesamte Fenster verwenden Sie das Element body.

Konfiguration:

exec {String} Ein Link zur globalen Funktion, die ausgeführt wird, wenn der Prozentsatz geändert wird

WICHTIG: Wenn exec nicht definiert ist, bindet die Komponente einen Wert gemäß path.

Verwenden Sie es mit <ui-component name="scrollpercentage">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>