Как я могу улучшить этот jQuery Gmail-подобный интерфейс?

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 работает должным образом и не выбирает задачу.

---

Хостинг этот код в JSFiddle , так как здесь нет никакого способа прокомментировать его полностью. Я разместил все свои JS, CSS и HTML, используемые для самого интерфейса.

Я разрабатываю вдохновленный Gmail пользовательский интерфейс для управления задачами с использованием jQuery на внешнем интерфейсе (и PHP на внутреннем, хотя это в значительной степени не имеет к этому отношения).

Я все еще относительно новичок в разработке jQuery, и поэтому я понимаю, Я делаю некоторые вещи неправильно . До сих пор я просто не знал что именно я делаю неправильно или как это исправить . Я надеялся, что некоторые более опытные люди могут помочь мне (и, надеюсь, другим) понять, как реорганизовать код jQuery для приложения большего размера.

Для начала, вот несколько вещей, которые я хотел бы знать, как сделать лучше:

1. Вызывайте этот код только при активном интерфейсе задачи.

2. Улучшение прослушивания для события keydown. В настоящее время я слушаю J , K , X , Shift + 3 и C . Я также буду прослушивать E для редактирования задач, но еще не внес изменения. Проблема со слушателями связана с моей первой проблемой, которая заключается в том, что они всегда включены . Это означает, что нажатие J в режиме <textarea>, например, не приведет к поведению по умолчанию.

3. Используйте меньше HTML в моем коде.

4. Сделайте мой код обычно более СУХИМ.

Любые мысли, какими бы критическими они ни были, приветствуются. Опять же, я понимаю, что не следую лучшим практикам здесь, но это потому, что я туп к ним. Я хочу учиться и надеюсь использовать эту возможность для этого.

Ура!

Answer 1

Мне нравится твоя идея! Я сделал несколько изменений в вашем коде, чтобы сделать его более упорядоченным ( обновленная демоверсия ):

1. Я удалил все привязки фокуса ввода ... затем добавил в функцию keydown проверку, которая игнорирует клавишу, если событие произошло в текстовом вводе или текстовом поле.
2. Обернут весь код в готовом документе - так что вы можете добавить свой код в заголовок страницы.
3. Изменено keydown с $(this) на $(document) ( ref ).
4. Добавлены кэшированные объекты jQuery для ускорения работы скрипта (например, container = $('#task-list-container')).
5. Сделана функция yellowTaskMessage для добавления предупреждений.
6. Добавлен yellow-task-message div в HTML.
7. Добавлено display:none в .yellow-task-message в CSS.
8. Оптимизировано несколько других вещей (например, развернутый next_task, поскольку это уже объект jQuery).
9. Запустил скрипт через JSLint , чтобы очистить все ошибки (не считая глобальные переменные)

Answer 2

.keydown не нужно присваивать $(window), требуется селектор, такой как $(':not(textarea)')

Answer 3

Я столкнулся с этим проектом прошлой ночью, и я был полностью вдохновлен! Я решил работать над этим всю ночь и сегодня и реорганизовал код, чтобы он стал немного более модульным и принимал любые данные.

Понятие задачи удалено, как и все, что изначально было приписано задаче. Я сделал это для планов, чтобы заставить это работать для любого вида данных и позволить дальнейшее отображение данных и редактирование данных с помощью других средств. Насколько я могу судить, этот интерфейс также ближе к более современному интерфейсу Gmail.

Отмеченные изменения функции:

• Более модульный, менее специфичный для «задачи».
• Скрытие кнопок, которые еще не в контексте, после того, как вы отметили элемент, другие кнопки исчезают.
• В окне фильтра исчезнут элементы, не найденные в строке поиска.
• Изменено «Завершено» на «Архив».
• js вызывается как функция, в которой вы передаете родительский объект, содержащий сетку (это делается для того, чтобы на одной странице могло существовать несколько сеток).
• Функция также принимает массив JSON, который определяет объекты, отображаемые с элементами: id, content, date в сетке. Пример встроен в мою демонстрацию:

http://jsfiddle.net/epic720/BfJYV/7/

http://jsfiddle.net/epic720/BfJYV/7/embedded/result/ (полный экран, без кода)

Буду рад любым откликам на этот счет, я планирую продолжить свою работу здесь и сделать его полнофункциональным пользовательским интерфейсом для редактирования данных.

Answer 4

Я буду первым, кто признает, что я еще не научился делать это (и я действительно должен), но перетаскивание было бы хорошим вариантом для изменения порядка задач в списке.Между прочим, очень красиво.Я использую IE8 и, к сожалению, не могу использовать сочетания клавиш, но похоже, что JSFiddle не позволит мне сместить фокус на область результатов, так что это может быть не тот код, который не работает для IE8.