Mixing It All Together
A jQuery Mobile template for offline access with all the icons and chrome-less webapp configuration will look like:
<!DOCTYPE HTML> <-- HTML definition with Offline Application Cache manifest --> <html manifest="offline.appcache"> <head> <meta charset="UTF-8"> <title>short title</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <-- jQuery Mobile files with custom theme --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" /> <link rel="stylesheet" href="custom_theme.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"> </script> <-- Icons --> <link rel="icon" href="icons/icon32.png"> <link rel="shortcut icon" href="icons/icon32.png"> <link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57"> <link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114"> <link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72"> <link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png"> <link rel="apple-touch-icon-precomposed" sizes="android-only" href="icons/icon57.png"> <-- If we want to have a chrome-less webapp --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="images/launch-iphone.png" ...
Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
