<!doctype html>
<-- thanks for http://jqueryui.com/progressbar/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slidecaster</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Вот как это выглядит
Шаг второй - добавить сверху на прогрессбарчик мувалку - наверное это будет какой-то дивчик, который я смогу мувать по прогрессбарчику. Вместе с этим позиция прогрессбарчика будет меняться в точку где размещен дивчик - ползунок.
Задачу так же можно дробить. Для начала просто отрисую поверх прогрессбара дивчик. Потом научусь его мувать. Потом свяжу позицию с состоянием на прогрессбарчике. Вроде как не дробится больше.
Что надо сделать - добавить новый дивчик, задать ему стиль.
<!doctype html>
<!-- thanks for http://jqueryui.com/progressbar/ -->
<html lang="en">
<head>
...
<script>
...
</script>
<style>
.move {
width: 2px;
height: 40px;
background-color: black;
cursor: e-resize;
position: absolute;
}
</style>
</head>
<body>
<div id="progressbar"></div>
<div class="move"></div>
</body>
</html>
Идем дальше. Дивчик надо заставить муваться. Для понимания как это сделать гуглим "jquery drag div" и первая же статья наша. Добавили в скрипт строчку
$(".move").draggable();
Но теперь надо ограничить передвижения дивчика. Как? Гуглим "jquery draggable only x" и первый же ответ stack overflow наш. Добавляем вызов функции draggable один параметр
$(".move").draggable({ axis: "x" });
Еще один маленький штришок - надо сделать чтобы дивчик мувался по прогрессбару а не под ним. Добавим еще одну строчку.
$(".move").css("top", $("#progressbar").position().top - 5);
$(".move").height($("#progressbar").height() + 10);
Как это делается я помню, так как неоднократно делал уже. Но если че загуглить можно было бы по "jquery position get/change". Надо бы сохраниться! И посмотреть как это выглядит.
$(function() {
$("#progressbar").progressbar({
value: 0, // позицию по умолчанию в ноль - там где и курсор
max: $("#progressbar").width() // количество делений прогрессбара такое же как и ширина
});
$(".move").css("top", $("#progressbar").position().top - 5);
$(".move").height($("#progressbar").height() + 10);
$(".move").draggable({ axis: "x" });
// добавили новый обработчик драга дивчика при его перемещении - меняется и состояние прогрессбара
var drag = function(event){
var pos = $(".move").position().left - $('#progressbar').position().left;
$("#progressbar").progressbar("value", pos);
};
$('body').bind('drag', drag);
});
Посмотреть как это выглядит можно по этой линке или ниже в iframe.
Сообщения
Комментариев нет:
Отправить комментарий