jquery - 我如何改进这个类似于 Gmail 的 jQuery 界面？

Question

编辑3:我通过忽略下面给出的建议并在窗口上聆听来实现此功能，但仅当 input 时才有效。 , text字段，或textarea不专心。不过，我不确定这是否是处理此问题的最佳方法。

http://jsfiddle.net/gXPES/5/

<小时/>

编辑 2:我已尝试解决 keydown通过申请 focus 发出问题和blur处理程序至input s。然后我只在 var focus_on_input == true 时监听事件。但似乎并非一切都好。这可以防止某些行为，但会导致其他更奇怪的行为。例如，当我tab离开输入字段时，按J和K将跳转到列表的顶部或底部。如果我click转移焦点到其他地方，这个问题就解决了。有什么想法吗？

<小时/>

编辑:感谢回答者的帮助，我在收听 keydown 时限制了选择器这样我仍然可以在其他地方输入字符，但我遇到了一个新问题。当我按 J 或 K 时，箭头导航会跳转到任务列表的顶部或底部。当我按 C 或 # 时，它会通知我没有选择任何任务。 X 正常工作，并且不选择任务。

<小时/>

托管 this code on JSFiddle因为这里无法对其进行完整评论。我已经发布了用于界面本身的所有 JS、CSS 和 HTML。

我正在设计一个受 Gmail 启发的 UI，用于在前端使用 jQuery(在后端使用 PHP，尽管它与此无关)进行任务管理。

我对 jQuery 开发还比较陌生，所以我意识到我做错了很多事情。到目前为止，我根本不知道到底我做错了什么，也不知道如何解决它。我希望一些更有学识的人可以帮助我(也希望其他人)弄清楚如何为更大的应用程序重构 jQuery 代码。

首先，我想知道如何做得更好:

1. 仅当任务界面处于事件状态时调用此代码。

2. 改善keydown的听力事件。目前我监听 J、K、X、Shift+3 和 C。我还将在 E 上收听任务编辑，但尚未实现编辑。 听众的问题与我的第一个担忧有关，即他们总是在线。这意味着在 <textarea> 中按 J例如，不会导致默认行为。

3. 在代码中使用更少的 HTML。

4. 使我的代码总体上更加干燥。

任何想法，无论多么批评，都非常受欢迎。再次，我意识到我在这里没有遵循最佳实践，但那是因为我对它们很愚蠢。我想学习，希望能利用这个机会。

干杯!

Answer 1

我喜欢你的想法!我对您的代码做了一些更改，使其更加精简( updated demo ):

1. 我删除了所有输入焦点绑定(bind)...然后在 keydown 函数中添加了一项检查，如果事件发生在文本输入或文本框中，则忽略该键。
2. 将所有代码包装在准备好的文档中 - 这样您就可以将代码添加到页面头部。
3. 将 keydown 从 $(this) 更改为 $(document) ( ref )。
4. 添加了缓存的 jQuery 对象以加快脚本速度(例如 container = $('#task-list-container'))。
5. 创建了一个 yellowTaskMessage 函数来添加警报。
6. 在 HTML 中添加了 yellow-task-message div。
7. 在 CSS 中的 .yellow-task-message 中添加了 display:none。
8. 简化了其他一些事情(例如，展开的 next_task 因为它已经是一个 jQuery 对象)。
9. 通过 JSLint 运行脚本清除任何错误(不包括全局变量)