Как я могу реализовать пользовательский интерфейс Dipity Timeline?

Question

Если вы еще не слышали о Dipity, это веб-приложение, которое позволяет людям создавать временные шкалы в браузере.Вот пример временной шкалы: http://www.dipity.com/StevePro/Steve-Jobs-Life-and-Career/

Как я могу реализовать функциональность временной шкалы, которую вы видите в приведенной выше ссылке?В частности, как достигается увеличение, прокрутка импульса и другие элементы пользовательского интерфейса без Flash?

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

Заранее спасибо за помощь.

Answer 1

Во-первых, вы можете просмотреть исходный код и увидеть, что они используют множество плагинов jQuery и jQuery:

<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityAccount.js.v8972.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-1.4.2.min.js.v8078.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipity.js.v9015.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityCookie.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityDialog.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipitySearch.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery-ui-1.8.custom.min.js.v8078.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/swfupload.js.v7257.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/swfupload2.2.0/functions.js.v8803.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/carousel.js.v8453.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/typewatch.js.v7961.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.mousewheel.min.js.v8346.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/jquery.autogrow-textarea.js.v8871.js"></script>
<script type="text/javascript" src="http://www.dipity.com/js/widget.js?key=8307484b5ef1207f7f202fe890a8e14d&sig=5d284fd444ffec2ff3b59dbe2d3d8167"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityForms.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityEvent.js.v8979.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/dipityTopic.js.v8941.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/eventdetail.js.v8490.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/tl_below.js.v6370.js"></script>
<script type="text/javascript" src="http://cdn.dipity.com/static/lib/js/ajaxForm.js.v8875.js"></script>

Вы не получите никаких "do A, B и C".и все готово », поскольку у них есть очень сложный пользовательский интерфейс, идущий туда.Моим предложением было бы начать с одного куска (холст или события колеса мыши) и просто создать небольшой фрагмент за раз, или найти плагины для сборки частей, а затем собрать их все вместе, чтобы создать то, что вам нужно.

Так же, как и почти все программное обеспечение, создается.Вы берете свои отдельные строительные блоки и складываете их вместе, чтобы создать свое собственное уникальное творение.