university of rochester libraries...jquery javascript - jquery mobile javascript - jquery css these...

Voyager Mobile Skin Developed Using the jQuery Mobile Web Framework

By Wes Clawson

University of Rochester Libraries

Contact: Denise Dunham - ddunham@library.rochester.edu

en_US Rochester Original Mobile skin After Adding jQuery Mobile

We needed to make some simple changes to a few XML/XSL files.

To start using jQuery Mobile

You need three new things: jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS

These are placed in frameWork.xsl

To make things easier: We trimmed down an original skin first. By getting rid of features that we knew weren’t going to be used on mobile devices, we had a lot less to worry about when we added jQuery Mobile.

How We Did It

When the page is loaded by a browser, jQuery Mobile makes changes to markup that has been indicated with special tags.

Generates a clickable button

Button shape and color can be based on existing jQuery Mobile themes

Generates a divider with collapsible content

Collapsible Divider (closed)

Collapsible Divider (open)

Stylized Buttons

These special tags were added to markup where we wanted jQuery to form certain types of elements.

Value Slider

Stylized Drop-down Menus

In the end, roughly 27 files were modified

to include jQuery-specific markup tags, giving a sleek, simple, yet robust mobile interface.

jQuery Mobile save a lot of the time and resources that are normally needed to develop stylistic graphics and formatting.

Items are auto-generated!

Buttons

Search Box

Active Item Styling

Icons

Why We Did It

Button Icons (standard jQuery Mobile)

3rd party icons also available!

Automatically formed “nav bars” will adjust size based on the number of links loaded on the particular page.

The jQuery Mobile framework allows developers a fast and simple way to create skins that are easily accessible on mobile devices.

Contains out of the box theming abilities!

Different layouts can easily be done using ONLY simple HTML changes!

Taken from http://jquerymobile.com/demos/

Examples of Fully Compatible Systems

Apple iOS - iPhone (3.1 + ) - iPad (4.3 / 5.0)

Android (2.1 + )

Blackberry (6.0 + )

Windows Phone (7.0 + ) Palm WebOS (1.4 + )

Kindle 3, Kindle Fire