jQuery UI in Action: mobile

[Bear Bibeault]

In another topic:

TJ wrote:A lot of people don't realize this, but the jQuery UI widget factory is actually the basis of jQuery Mobile, as well as some 3rd-party commercial libraries.

which brings up an interesting topic. To what extent are the jQuery UI widgets mobile-frendly (when used outside of jQuery Mobile)?

A lot of the new HTML5 controls are great on the desktop, but I've found that controls like the native range slider are less than friendly or usable on tablets and phones.

In this new age of mobile-first design, what are the advantages that jQuery UI brings to the table?

[Tj VanToll]

Hey Bear,

Certain parts of jQuery UI are more mobile-friendly than others, but the core of jQuery UI is useful in both a mobile and desktop context. For example the widget factory is just as applicable to mobile development as it is to desktop development as it just helps you build widgets—which is why it works fine for jQuery Mobile. Another example would be the position utility, as helps you position elements regardless of the screen it's being positioned on.

There are some widgets in jQuery UI where the default CSS was written with a more traditional desktop browser in mind—datepicker being the best example. Because of this I devote a section of the book showing how to use datepicker in a mobile context, which involves a few media queries and setting a few options. I try to cover these mobile-specific use cases as they come up in the book. For instance setting autocorrect="off" and autocapitalize="off" attributes makes for a more usable autocomplete widget on mobile (as you almost never want the browser to “correct” your predefined options).

In jQuery UI we consider mobile browsers to be extremely important and we've been increasingly working to optimize for these devices. The jQuery UI and jQuery Mobile projects are slowly merging, as users shouldn't have to choose between two libraries—there should just be a bunch of widgets that just work. And since both projects are built on the widget factory it's not that big of a stretch. For example the 1.4 release of jQuery Mobile includes the jQuery UI tabs widgets verbatim—not a single line of JS code is different. You can expect more of this in the near future.

TJ