What is jQuery Mobile?
Most folks nowadays have a mobile device of some description, which means that most people are used to doing our digital duties using mobile interfaces. These interfaces include standard mobile elements such as fixed headers and footers, navigation bars, list views, tabs, switches that turn on and off, and hidden menus invoked by a “hamburger” icon.Coding elements such as these is possible, but it would be a ton of work. Fortunately, you can skip all of that because the hardcore geeks at jQuery Mobile have done it all for you. jQuery Mobile is a set of mobile-optimized widgets that make it easy for you to design your mobile web app to have the look and feel of a native mobile app.
Best of all, the jQuery Mobile components work just like the jQuery UI widgets. Now all you have to do is incorporate jQuery Mobile into your app.
Adding jQuery Mobile to your web app
jQuery Mobile consists of two files:- A JavaScript (
.js) file that you add to your page by using a<script>tag with a reference to the external script file. - A CSS (
.css) file that you add to your page by using a<link rel="stylesheet">tag with a reference to the external CSS file.
- Download the files and use the default jQuery Mobile styles. In this case, surf to jquerymobile.com/download and click the ZIP File link. The file you get will have a name like
jquery.mobile-1.<em>x</em>.<em>y</em>.zip, where x and y denote the current version. Decompress the ZIP file and then copy the jquery.mobile-1.x.y.min.js andjquery.mobile-1.x.y.min.css files to your mobile web app's JavaScript and CSS folders. Then set up your<link>and<script>tags to reference the files:
(Remember to replace x and y with the actual version numbers of your downloaded file.)
- Use custom jQuery Mobile styles. In this case, surf to themeroller.jquerymobile.com and use the ThemeRoller app to set your custom colors, fonts, and other styles. Click the Download Theme ZIP File button, type a theme name, and then click Download ZIP. Decompress the downloaded ZIP file, copy the CSS file from the Themes folder, and then add it to your mobile web app's CSS folder. Then set up your
<link>tag to reference the file:
Replace custom with the custom theme name you provided. Note that this only gives you the CSS for jQuery Mobile. You still need to download the jQuery Mobile JavaScript file.
- Link to a remote version of the file. Several content delivery networks (CDNs) store the jQuery Mobile files and let you link to them. Here are the tags to use for Google's CDN:
Again, in both cases, be sure to replace x and y with the actual version numbers of the latest version of jQuery Mobile.
You also need to add jQuery to your page. However, currently, jQuery Mobile is only compatible with version 2 of jQuery, so be sure to link to that version, not version 3.