Сегодня будем писать слайдкастер. Эту такая штука, которая в браузере позволит совместить слайды с аудио. Вместо того,
чтобы писать avisynth скрипт вручную, дергая постоянно virtualdub, я буду загружать весь контент в браузер и мышкой мувать ползунки - где когда какой слайд начать. Удобно - я такую фичу на SlideShare видел. Хочу такую же! Бесплатно и для всех докладчиков.
В начале реализаици любой фичи идет ее декомпозиция на подзадачи, каждая из которых гуглится - т.е. решение можно за 5-10 минут найти в сети и попробовать у себя в интеграции с существущим кодом. Самое первое, что мне приходит в голову - это сделать банальный прогрессбар и научиться управлять им со скрипта. Вперед! Гуглим что-то типа "jquery progressbar" и смотрим что предлагает гугл. И
первый же пример мне подходит! берем волшебный copy past driven development и копируем исходник себе в файлик 1.html, оставляя пометку // спасибо за http://jqueryui.com/progressbar/ чтобы не терять связь с автором.
Вот он код. Что я сделал - поменял заголовок. У нас жеж наше приложение. Добавил комментарий и пути к скриптам сделал абсолютными.
<!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>
Вот
как это выглядит
Сразу после этого я создам git репозиторий в той же папке что и скрипт и отправлю изменения в файловый рай.
Шаг второй - добавить сверху на прогрессбарчик мувалку - наверное это будет какой-то дивчик, который я смогу мувать по прогрессбарчику. Вместе с этим позиция прогрессбарчика будет меняться в точку где размещен дивчик - ползунок.
Задачу так же можно дробить. Для начала просто отрисую поверх прогрессбара дивчик. Потом научусь его мувать. Потом свяжу позицию с состоянием на прогрессбарчике. Вроде как не дробится больше.
Что надо сделать - добавить новый дивчик, задать ему стиль.
<!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". Надо бы сохраниться! И посмотреть
как это выглядит.
Следующий шаг - влиять на прогрессбар. И тут начинается самое интересное, поскольку оказывается, что тот прогрессбар, который предоставляется jquery немного не попиксельно перемещается. Вот как-то так изменилась функция.
$(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.
Продолжение следует! А пока можешь погуглить в чем дело :)
Сообщения
