Trevor Burnham

Although my team is in the early stages of devel­op­ing The­o­ryville, we’re always thinking ahead when it comes to our inter­face. We think the iPad is going to be huge in the academic world, and we’d love to give people the sat­is­fac­tion of doing science with the tap of a finger, Avatar–style. But rather than split­ting our devel­op­ment efforts between a website and a ded­i­cated iPad app, we decided to make our site iPad-​​compatible by intro­duc­ing a few behav­ioral tweaks. I recently coded the first of these tweaks into a small jQuery plugin, which I’m now releas­ing as an open-​​source project under the MIT License and giving its own home at http://​jqtap​.org.

This is an early effort, and I’m hoping that it will grow into a much more robust and feature-​​rich project, just as jqTouch has grown to become a top-​​notch way to develop ded­i­cated iPhone webapps. jqTap is not a sub­sti­tute for jqTouch: Whereas jqTouch is for creating separate versions of sites aimed specif­i­cally at devices using mobile WebKit, jqTap is for sites that want to play two dif­fer­ent tunes, one for mice and one for fingers.

When you ini­tial­ize jqTap, it auto­mat­i­cally detects whether you’ve got a touch­screen or a mouse. (Actually, it cur­rently only detects iPhone and iPad touch­screens. If there’s a JS library out there for touch­screen detec­tion, let me know!) Then, by default, it hides every DOM element with the class mouse if you’re on a touch­screen, and hides every­thing with class touch if you’ve got a mouse. This lets you alter details of your site; for instance, using a couple of spans, you can say either “Click here” or “Tap here” as appro­pri­ate. You can make your own code con­di­tional on the touch/​mouse mode using the $.jqTap.mode value, or you can pass a function into $(selector).ifTouch() or $(selector).ifMouse(). For instance, if there are Twitter-​​style hover controls on your site, you could wrap the code that hides them in ifMouse(); or if they’re hidden by CSS, override that CSS within an ifTouch() block.

All of that is pretty trivial. The cool part is the added events. More of these will be added in the future, but here’s what jqTap has to offer so far:

1. tap(): jqTap is intended to be a harmless drop-​​in, so click() events will continue to work on both touch and mouse inter­faces. However, tap() over­rides them on touch­screen devices, allowing you to replace the default click func­tion­al­ity as needed. [Note: In order to override click() events, tap() must be defined later. This will be addressed in the next release.]
2. tapOut(): Responds to a touch­screen tap outside of an element.
3. hoverOrTap(): Equiv­a­lent to hover for a mouse inter­face, respond­ing to mouseenter() and mouseleave() events. Since those events don’t exist on a touch­screen, hoverOrTap() responds to tap() and tapOut() instead.

Go ahead and grab the source at GitHub. Feedback would be much appre­ci­ated. Feedback with code con­tri­bu­tions, doubly so!

Tags:   jqTapNo Comments