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 How We Did It 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. Generates a divider with collapsible content Button shape and color can be based on existing jQuery Mobile themes Generates a clickable button When the page is loaded by a browser, jQuery Mobile makes changes to markup that has been indicated with special tags. These special tags were added to markup where we wanted jQuery to form certain types of elements. Collapsible Divider (closed) Collapsible Divider (open) Stylized Drop-down Menus Value Slider Stylized Buttons In the end, roughly 27 files were modified to include jQuery-specific markup tags, giving a sleek, simple, yet robust mobile interface. Why We Did It 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 Button Icons (standard jQuery Mobile) 3rd party icons also available! The jQuery Mobile framework allows developers a fast and simple way to create skins that are easily accessible on mobile devices. Automatically formed “nav bars” will adjust size based on the number of links loaded on the particular page. 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 .