TweetActivate, Select and UI Design Patterns

When building a widget in the web, we are used to thinking of just one event:

• Click

But if you care about accessibility, or keyboard navigation, you open yourself to a much larger world:

• Click
• DblClick
• Hover / Mouseover
• Focus / Blur
• Keypress (which can be broken into directional keys, enter key, tab, and shift tab)

Handling all of these events can make things difficult. If you build plugins for general consumption, you’ll find that people want different events to perform different actions. Fortunately, for most interfaces, you can split native events into two broad event categories …

• Select
• Activate

… and write your application around these events, only later hooking them up to the native browser events appropriately. This article discusses how to do this with jQuery and JavaScriptMVC. First, lets start off with a description of the events.

Select

A select event is when a user is on a particular button. They have expressed interest in it. But, that interest doesn’t mean they actually want to use it yet. They may very easily pass from that object to another one. Typical native events that might end up selecting something are:

• Hover / Mouseover
• Focus
• Tab, and directional keys.
• Click (when DblClick is used)

An example of selecting something is tabbing between items in a list.

Active

An active event is when the user actually wants to perform something on that element. The user wants something to happen. Typical native events can be:

• Enter key
• DblClick or Click
• Directional keys (for something like a slider)

Separating Concerns

With Phui, I am attempting to build a meta event layer for controls. Instead of responding to clicks and keypresses, most Phui base widgets will respond to synthetic events. Assuming I get this working, I’d like developers to be able to easily hook up their own events into Phui’s widgets. Consider tabs:

HTML:

<ul class='tabs'>
  <li class='tab'>tab1</li>
  <li class='tab'>tab2</li>
  <li class='tab'>tab3</li>
<ul>
<div class='panel' id='lions'>Content 1</div>
<div class='panel' id='tigers'>Content 2</div>
<div class='panel' id='bears'>Content 3</div>

JS:

//Create tabs with phui
$(".tabs").phui_tabs();
//make the tabs respond to focus and the enter key
$('.tab').attr("tabindex",0)
         .focus(function(){ $(this).trigger("select") })
         .keypress(function(ev){
                if(ev.keyCode === 13){
                        $(this).trigger("activate");
                }
         })

Or … what if we wanted to get ajax content on those panels (which get activate triggered on them).

$('.panel').bind('activate',function(ev){
  ev.preventDefault(); // don't call activated right away
  var el = $(this);
  $.get("/"+el.attr('id'), {}, function(response){
    el.html(response);
    el.trigger('activated')
  })
})

Hopefully this makes sense and is possible. We don’t have comments up yet so send me a tweet if you have any ideas.