如何实现Dipity Timeline UI？

Question

如果你没有听说过Dipity，它是一个允许人们在浏览器上创建时间表的web应用程序。下面是一个时间线的例子：http://www.dipity.com/StevePro/Steve-Jobs-Life-and-Career/

我如何实现您在上面的链接中看到的时间线功能？更具体地说，如果没有Flash，缩放、动量滚动和其他UI元素是如何实现的？

根据您的专业知识，如果我想要制作一个可以放大/缩小、滚动和全屏显示的画布，我应该查看哪些库或项目？

提前感谢您的帮助。

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>

你不会得到任何“做A，B，C，然后你就完成了”，因为他们有一个非常复杂的UI。我的建议是从其中的一部分(画布或鼠标滚轮事件)开始，一次只构建一小部分，或者找到插件来构建这些部分，然后将它们放在一起来构建你想要的东西。

这几乎与所有软件的构建方式相同。您可以将您的各个构建块堆叠在一起，以创建您自己的独特创作。