j-ScrollPercentage

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Компонентът трябва да бъде прикрепен към елемента, който ще бъде като контейнер. body Елементът

Конфигуриране:

exec {String} - връзка към глобалната функция, която се изпълнява, ако процентът се променя

__Важен: ако exec не е дефиниран, тогава компонентът ще свърже стойност в съответствие с path.

Използвайте го с <ui-component name="scrollpercentage">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

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>