ScrollButtonMouseUp : function (sender,args)
sender. Источник события;
args. Информация о событии;
Событие ScrollButtonMouseUp наступает при отжатии клавиши мыши, после нажатия кнопки перемещения ползунка по полосе прокрутки.
Для выполнения примера подключим ссылки на библиотеку PP.js и таблицы визуальных стилей PP.css. Создадим три одинаковые полосы прокрутки с наименованиями «hScrollBar», «vScrollBar» и «zScrollBar». Добавим обработчики событий ScrollButtonMouseUp и ScrollButtonMouseDown для полосы прокрутки с наименованием «hScrollBar»:
<div id="scroll1"></div>
<div id="scroll2"></div>
<div id="scroll3"></div>
<script type="text/javascript">
var hScrollBar = new PP.Ui.ScrollBar({ //1-ая полоса прокрутки
ParentNode: document.getElementById("scroll1")
});
//Размер 1-ой полосы прокрутки и ее ползунка :
hScrollBar.setSize(200, 16);
hScrollBar.setDraggerSize(30);
hScrollBar.updateSize();
var vScrollBar = new PP.Ui.ScrollBar({ //2-ая полоса прокрутки
ParentNode: document.getElementById("scroll2")
});
//Размер 2-ой полосы прокрутки и ее ползунка :
vScrollBar.setDraggerSize(30);
vScrollBar.setTop(30);
vScrollBar.setSize(200, 16);
vScrollBar.updateSize();
var zScrollBar = new PP.Ui.ScrollBar({ //3-я полоса прокрутки
ParentNode: document.getElementById("scroll3")
});
//Размер 3-й полосы прокрутки и ее ползунка :
zScrollBar.setDraggerSize(30);
zScrollBar.setTop(50);
zScrollBar.setSize(200, 16);
zScrollBar.updateSize();
//Добавляем обработчик события ScrollButtonMouseDown:
hScrollBar.ScrollButtonMouseDown.add(function (sender, args) {
//Передвижение ползунка второй полосы прокрутки в позицию ползунка первой полосы прокрутки, при нажатии клавиши мыши на кнопку перемещения ползунка:
vScrollBar.setValue(hScrollBar.getValue());
});
//Добавляем обработчик события ScrollButtonMouseUp:
hScrollBar.ScrollButtonMouseUp.add(function (sender, args) {
//Передвижение ползунка третьей полосы прокрутки в позицию ползунка первой полосы прокрутки, при отпускании клавиши мыши кнопки перемещения ползунка:
zScrollBar.setValue(hScrollBar.getValue());
});
</script>
После выполнения примера на html-странице будут размещены 3 экземпляра компонента ScrollBar. При нажатии кнопки передвижения ползунка компонента с наименованием «hScrollBar» ползунки второго и третьего компонента займут позиции начала и конца пути первого ползунка .
До нажатия на кнопку:
После нажатия на кнопку:
См. также: