如何改进这个类似jQuery Gmail的界面？

Question

编辑3:我已经通过忽略下面给出的建议并在窗口上聆听来实现这一点,但只有当一个input,一个text字段或textarea没有集中注意力时.不过,我不确定这是否是处理此问题的最佳方式.

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

---

编辑2:我已经尝试keydown通过应用focus和blur处理程序来解决问题input.然后我只会在什么时候听事件var focus_on_input == true.但似乎并非一切都很顺利.这可以防止某些行为,但会导致其他更奇怪的行为.例如,当我tab走出输入字段,按下J并K会跳转到顶部或底部的名单.如果我click在其他地方转移焦点,这个问题是固定的.有什么想法吗？

---

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

---

在JSFiddle上托管此代码,因为这里没有可能的方式对其进行全面评论.我已经发布了用于界面本身的所有JS,CSS和HTML.

我正在设计一个基于Gmail的UI,用于在前端使用jQuery进行任务管理(以及后端的PHP,尽管它与此基本无关).

我仍然是jQuery开发的新手,所以我意识到我做了很多错事.到现在为止,我根本不知道我到底做错了什么,也不知道如何解决它.我希望一些更有学识的人可以帮助我(和其他人,希望)找出如何为更大的应用程序重构jQuery代码.

首先,我想知道如何做得更好的一些事情:

1. 仅在任务界面处于活动状态时调用此代码.

2. 改善对keydown事件的倾听.目前我听J,K,X,Shift+3,和C.我也将听取E任务编辑,但尚未实施编辑.听众的问题与我的第一个问题有关,即他们总是在关注.这意味着例如J在a 中按下<textarea>不会导致默认行为.

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

4. 让我的代码更干燥.

任何想法,无论多么重要,都非常受欢迎.我再次意识到我并没有遵循这里的最佳做法,但那是因为我对他们愚蠢.我想学习,并希望借此机会这样做.

干杯!

Answer 1

我喜欢你的想法！我对您的代码做了一些更改，使其更加精简（更新的演示）：

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