Geek Answers Handbook

How can I improve the jQuery Gmail interface?

EDIT 3:. I got this working by ignoring the advice below and listening to it, but only if the input , text or textarea field is not focused. I am not sure if this is the best way to deal with this problem.

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

EDIT 2: I tried to solve the keydown problem by applying focus and blur handlers to input s. Then I listen only for events when var focus_on_input == true . But, it seems, not all is well. This prevents some behaviors, but causes other, weirder behaviors. For example, when I tab leaves the input field, pressing J and K will move up or down the list. If I click elsewhere and focus shift, this problem is fixed. Any thoughts?

EDIT:. Thanks to the help of the administrator, I restricted selectors when listening to keydown so that I could still print characters elsewhere, but I am having a new problem. When I press J or K , the nav arrow jumps to the top or bottom of the task list. And when I press C or # , it will notify me that no tasks have been selected. X functions as it should and does not select a task.

Hosting this code in JSFiddle , since there is no possible way to comment it in its entirety. I published all my JS, CSS and HTML used for the interface itself.

I am developing a Gmail-oriented user interface for task management using jQuery on the interface (and PHP on the internal interface, although this is largely unrelated to this).

I'm still relatively new to jQuery development, and so I understand that I'm doing the wrong amount . Until now, I just did not know what exactly I was doing wrong, and how to fix it . I was hoping some more learned souls could help me (and others, hopefully) figure out how to refactor jQuery code for a larger application.

To get started, here are a few things I would like to know how to do better:

  • Call this code only when the task interface is active.

  • Improve your listening for the keydown event. I am currently listening to J , K , X , Shift + 3 and C. I will also listen to E for editing the task, but have not yet implemented the changes. The problem with the listeners is related to my first concern, which is that they are always on . This means that pressing J , while in <textarea> , for example, will not result in default behavior.

  • Use less HTML code in my code.

  • Make my code drier.

Any thoughts, however important, are more than welcome. Again, I understand that I am not following the best practices here, but that is because I am dumb to them. I want to learn and hope to use this opportunity to do this.

Hooray!

+6
jquery user-interface refactoring gmail
source share
4 answers

I like your idea! I made a few changes to your code to make it more streamlined ( updated demo ):

  • I removed all input focus bindings ... then added a check to the keydown function that ignores the key if the event occurred in a text or text field.
  • Wrapped all the code inside the document so you can add your code to the head of the page.
  • keydown from $(this) to $(document) ( ref ).
  • Added cached jQuery objects to speed up the script (e.g. container = $('#task-list-container') ).
  • Created a yellowTaskMessage function to add warnings.
  • Added yellow-task-message div in HTML.
  • Added display:none to .yellow-task-message in CSS.
  • Arrange a few other things (for example, next_task , since it is already a jQuery object).
  • Edit the script via JSLint to clear any errors (not counting global variables)
+2
source share

.keydown does not need to be assigned $(window) , this requires a selector, for example $(':not(textarea)')

+1
source share

I will be the first to admit that I have not yet learned how to do this (and I really should), but drag and drop will be a good option for changing tasks on the list. By the way, the look is very pleasant. I use IE8, and unfortunately I cannot use keyboard shortcuts, but it seems that JSFiddle will not allow me to switch focus to the result area, so this may not be your code that does not behave for IE8.

0
source share

I met this project last night and I was completely inspired! I decided to work on it all night and today and reorganized the code to be more modular and accept any data.

The concept of the task has been deleted, as well as everything that was originally attributed to the task. I did this for plans, so that it works for any data and allows me to additionally display data and edit data using other means. As far as I know, this interface is also closer to the more modern Gmail interface.

Featured Feature Changes:

  • More modular, less specific to the "task".
  • Hiding buttons that are not already in context, after you check the item, the other buttons will disappear.
  • The filtering block will disappear, not found in the search bar.
  • Changed Completed to Archive.
  • js is called as a function in which you pass the parent object containing the grid (this is done so that multiple grids can exist on the same page).
  • The function also accepts a JSON array that defines the objects to display with the elements: id, content, date in the grid. In my demo, an example is built in:

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

http://jsfiddle.net/epic720/BfJYV/7/embedded/result/ (fullscreen, no code)

To love any feedback on this, I plan to continue my work here and make it a full-featured data editing user interface.

0
source share

More articles:


All Articles