Как сделать свой элемент управления и взаимодействовать с ним?

Question

[kuzubov]

На просторах интернета ну очень много информации по Javascript и первая сотня страниц в поиске дает хлам если честно.

Я так и не смог ответить на вопрос — а как же делать свои элементы управления и взаимодействовать с ними?


Ну скажем я хочу не кнопку и не слайдер, а скажем диаграму какую нибудь. И если просто нарисовать — это не проблема. Хочется чтобы она редактировалась прямо сама в себе — ну тоесть не какую то табличку заполнять, а мышкой вытягивать столбцы диаграммы и все такое…


Хочется чтобы при подведении к столбцу показывалась панелька с элементами управления столбцом, скажем крестик за который тянуть, кнопочка для показа текстового поля чтобы ввести свое число и крестик чтобы удалить столбец…


Короче — хочется интерактивно взаимодействовать с тем что я нарисую. И вот тут встал вопрос — что я не нашел урока как такое сделать даже самого простого ( То ли не то ввожу в поиске, то ли не там ищу. Как рисовать что угодно и через canvas и иными способами я уже более менее понял, как подменить кнопку на что то свое нарисованное — тоже в общем то… Но все это не имеет отношения к интерактивности.


В общем подскажите пример как сделать нарисовать что то — и потом с этим взаимодействовать? Скажем пусть будет кривая безье — чтобы можно было ткнуть в точку и потягать за нее меняя кривую… Ну или пусть будет диаграмма в которой вытягивать мышкой столбцы… Думаю это достаточно простые примеры и может даже где то описано как и что. Но не нашел сам…


Ну или хотя бы напишите последовательность действий как такое делается… А то совсем не понимаю откуда ноги растут в таких вещах…

Answer 1

[KEKSOV]

Боюсь, что в рамках короткого ответа этого не описать. В приведенной Вами задачке соединяются вместе несколько технологий, каждая из которых — свой огромный мир. В какой пропорции их соединить зависит от очень большого числа факторов. Перечислю в порядке возрастания сложности эти технологии со ссылками на учебные материалы:

1. HTML
2. CSS3
3. HTML DOM
4. JavaScript
5. Писать многие вещи с нуля на голом JS интересно будет только для целей самообразования. В большинстве случаев, можно и нужно воспользоваться готовыми фреймворками. Один из таких популярных пакетов — JQuery

Пожалуй, вот тут сделали хороший пример, демонстрирующий некоторые приемы объединения всех этих технологий в рабочий элемент управления.

Альтернативный вариант, это взять что-нибудь готовое и допилить под свои нужды. Полезно покопаться в чужом коде и подсмотреть как оно там работает. Отличный кандидат для вскрытия по Вашей задачке это Raphaël

Comments

[kuzubov]

спасибо. я вообще и планировал на jquery все делать, я им пользуюсь в своих нуждах уже давно. просто мне потребовался кастомный элемент управления который я не смог нигде найти. ну очень кастомный…
а примеры которые я описал — это именно примеры, так как начинать с малого надо, а не пытаться сразу диаграмму ганта интерактивную делать ничего не понимая…

я никогда просто не задумывался как пишутся свои вещи, а просто пользовался уже готовыми библиотеками для jquery и например dhtmlx…

[egorinsk]

Использовать тяжелые библиотеки для JS по-моему крайне дурацкая идея, в современных браузерах + IE7, 8 почти все, что надо поддерживается, селекторы не нужны, так как в любом браузере есть getElementById и node.children

Они были актуальны во временпа IE5 и 6.

Мне кажется, что добавлять 200 Кб тяжелых тормозящих костылей ради возможности написать addEventListener на несколько букв короче — излишество, а сам jQuery ассоциируется в основном с низкоквалифицированными верстальщиками, «не осилившими» яваскрипт и ДОМ и предпочитающими вместо этого копипастить код из интернета.

[KEKSOV]

Ну сочинять-то не надо про 200 Кб! Продакшн версия весит 32К. И хотелось бы взглянуть на Ваши проекты, написанные на чистом JS без излишеств.

Answer 2

[Андрей Апанасик]

В общем подскажите пример как сделать нарисовать что то — и потом с этим взаимодействовать? Скажем пусть будет кривая безье — чтобы можно было ткнуть в точку и потягать за нее меняя кривую…

Canvas.
1) Рисуете кривую.
2) Обрабатываете события мыши и перерисовываете кривую.

Comments

[kuzubov]

нифига не понял если честно… какие события? где?
ну нарисую я точку скажем на сплайне — а дальше что?
извините я не понимаю самой идеологии походу как и что делать надо…

www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html#
вот такое например хочу — кривая, плюс с точками чтобы таскать… но разбирать огромную библиотеку чтобы понять как сделано — не осилю просто

[Андрей Апанасик]

Может тогда не стоит браться, если в JS не сильны?

Подобные штуки требует довольно не слабых знаний.

[kuzubov]

сначала надо понять какие знания получать… чтобы стать хирургом не в экономический универ идут вообще то…
а когда не знаешь в какую сторону копать — то можно выкопать нехилую яму пока не скажут что не там копал…

[Андрей Апанасик]

Ну, я бы посоветовал покопаться в исходниках уже готовых решений. Но опять же, нужны базовые знания для понимания =/

[kuzubov]

спасибо, мне уже ниже подкинули что покопать, так что пошел разбираться )
думаю вопрос можно закрыть — пока хватает информации для изучения…