В начале реализаици любой фичи идет ее декомпозиция на подзадачи, каждая из которых гуглится - т.е. решение можно за 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.
Продолжение следует! А пока можешь погуглить в чем дело :)
Комментариев нет:
Отправить комментарий