Evernote刚刚发布了一个有趣的新网页界面。这是一个页面，列可以用鼠标等调整大小。
屏幕截图：http://blog.evernote.com/wp-content/uploads/2011/03/evernote_web_new8.jpg
使用jQuery构建类似内容的最佳方法是什么？另外，有什么想法Evernote用来构建这个界面的吗？我找不到萤火虫中的任何东西。
谢谢
答案 0 :(得分：2)
如果您对这类内容感到好奇，您应该使用Chrome开发者工具，Firefox Firebug Addon或Safari的“开发人员”菜单。他们真的非常善于让您了解网页上发生的事情
至于“他们是如何构建这个”的，在Web应用程序堆栈中上下使用了许多不同的技术。请记住，存储，缓存和获取所有这些数据的服务器与Web前端一样，都是Web应用程序的一部分。但我想你的问题是如何“他们如何让这个网页做所有这些互动的东西”。
基本上它看起来像是所有传统的HTML / CSS - 没有“HTML5”画布shenanigans或Flash。
交互性来自他们的自定义Javascript代码。我试图弄清楚他们是否正在使用一些流行的第三方Javascript框架（如jQuery或Prototype），但他们正在导入如此多的脚本，这很难遵循。有趣的是，在Evernote页面上，jQuery和$不是定义的变量，所以看起来他们不至少使用jQuery。他们已经清楚地写了很多的Javascript来使这个东西运行起来，所以想象他们只是决定将所有代码保留在内部并不是那么大。
仅供参考：三列绝对定位并且大小为<div> s。
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; bottom: 0px; width: 220px; ">...</div>
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 220px; top: 0px; bottom: 0px; width: 360px; ">...</div>
<div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 580px; top: 0px; right: 0px; bottom: 0px; ">...</div>
您在这些列中看到的滚动操作已在子<div>中完成。
答案 1 :(得分：2)
很难看出他们正在使用什么js框架，但有使用jQuery 1.8
他们正在使用http://icanhazjs.com/这是一个javascript客户端模板库。
他们正在使用http://requirejs.org/
答案 2 :(得分：0)
嗯，在非常基本的evernote上已经使用自定义javascript完成了它的笔记应用程序工作流程，尽管他们已经有很多其他框架用于后端工作。一种方法是使用Chrome web Inspector nad来查看它，如果在Firefox上，那么他们已经升级了网络检查员，现在它更酷了，但是如果你更喜欢那些备受欢迎的萤火虫，那就可以了。
有关他们用于构建的资源的详细信息，请使用网络分析工具（如www.buitwith.com）跟踪它。
这里是evernote网站主页的链接，在Builtwith.com上搜索：http://builtwith.com/?https%3a%2f%2fwww.evernote.com
然而，构建的应用程序包含许多自定义代码。很难指定确切的用法，但是如果我们检查代码，它没有显示AngularJS的任何特定用途，他们确实使用requireJS来加载模块。
由于您的问题是特定于前端的，因此可以使用HTML5，使用一些javascript或者如果您更喜欢使用框架来简化流程，那么请从JQueryUI查看此链接。
https://jqueryui.com/resizable/
如果没有提到AngularJS和ReactJS被淹没，他们仍然是UI开发的国王。
而且，如果您尝试使用普通的香草JavaScript，那么这将为您提供学习曲线的优势。
答案 3 :(得分：-1)
他们使用Angular.js，HTML5，CSS3，自定义Javascript和JQuery（以及其他人已经注意到的许多其他内容）。