Evernote 刚刚发布了一个有趣的新网页界面。它是一页，列可以用鼠标等调整大小。
截图:http://blog.evernote.com/wp-content/uploads/2011/03/evernote_web_new8.jpg
用 jQuery 构建这样的东西的最佳方法是什么？另外，知道 Evernote 使用什么来构建这个界面吗？我在带有提示的 Firebug 中找不到任何东西。
谢谢
最佳答案
如果您对这类东西感到好奇，您应该尝试使用 Chrome 开发者工具、Firefox Firebug Addon 或 Safari 的“开发者”菜单。他们非常擅长让您深入了解网页中正在发生的事情
至于“他们是如何构建它的”，Web 应用程序堆栈上下使用了许许多多不同的技术。请记住，存储、缓存和获取所有这些数据的服务器与前端一样是 Web 应用程序的一部分。但我想你的问题是问“他们是如何让这个网页做所有这些互动的事情的”。
基本上它看起来像是所有传统的 HTML/CSS——没有“HTML5” Canvas 恶作剧或 Flash。
交互性来自他们的自定义 Javascript 代码。我试图弄清楚他们是否使用了一些流行的第 3 方 Javascript 框架(如 jQuery 或 Prototype)，但他们导入的脚本太多，很难理解。有趣的是jQuery和 $在 Evernote 页面上没有定义变量，所以看起来它们至少没有使用 jQuery。他们显然已经编写了 很多 Javascript 来启动和运行这个东西，所以可以毫不夸张地想象他们会决定将所有代码保留在内部。
仅供引用:三列只是绝对定位和大小 <div>
<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> 中完成的
关于jquery - 如何构建像 Evernote 这样的界面。一页，列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5503276/