university of rochester libraries...jquery javascript - jquery mobile javascript - jquery css these...
TRANSCRIPT
Voyager Mobile Skin Developed Using the jQuery Mobile Web Framework
By Wes Clawson
University of Rochester Libraries
Contact: Denise Dunham - [email protected]
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