University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These...
Transcript of University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These...
![Page 1: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/1.jpg)
Voyager Mobile Skin Developed Using the jQuery Mobile Web Framework
By Wes Clawson
University of Rochester Libraries
Contact: Denise Dunham - [email protected]
![Page 2: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/2.jpg)
en_US Rochester Original Mobile skin After Adding jQuery Mobile
![Page 3: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/3.jpg)
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
![Page 4: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/4.jpg)
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
![Page 5: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/5.jpg)
In the end, roughly 27 files were modified
to include jQuery-specific markup tags, giving a sleek, simple, yet robust mobile interface.
![Page 6: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/6.jpg)
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
![Page 7: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/7.jpg)
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.
![Page 8: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/8.jpg)
Contains out of the box theming abilities!
Different layouts can easily be done using ONLY simple HTML changes!
Taken from http://jquerymobile.com/demos/
![Page 9: University of Rochester Libraries...jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin](https://reader034.fdocuments.in/reader034/viewer/2022042516/5fb2513017b19b25ed64f512/html5/thumbnails/9.jpg)
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