{"id":11000,"date":"2012-01-17T21:01:10","date_gmt":"2012-01-17T13:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=11000"},"modified":"2025-04-04T00:44:39","modified_gmt":"2025-04-03T16:44:39","slug":"build-websites-apps-jquery-mobile","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/","title":{"rendered":"Beginner&#8217;s Guide to jQuery Mobile to Mobile App Development"},"content":{"rendered":"<p><strong>Note:<\/strong> This post was first published on the 17th Jan, 2012.<\/p>\n<p>Over the past 2-3 years, we\u2019ve seen tremendous growth in browser and OS support for mobile websites. Most notably, Apple\u2019s iOS and Google\u2019s Android platforms come to mind. But others such as PalmOS and Blackberry are still in the mix. Up until recently, it was very difficult to match a single mobile theme into all of these platforms.<\/p>\n<p>JavaScript was a start, but there hasn\u2019t been any truly unified library until now. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/\">jQuery Mobile<\/a> takes all the best features of jQuery and ports them over to a mobile-based web source. The library is more like a framework that includes animations, transition effects, and automatic CSS styles for basic HTML elements. In this guide, I hope to introduce the platform in a way that you can feel comfortable designing your own jQuery mobile apps.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile-custom-themes\/\" class=\"ref-block__link\" title=\"Read More: Mobile App Design\/Dev: Custom Themes with jQuery Mobile\" rel=\"bookmark\"><span class=\"screen-reader-text\">Mobile App Design\/Dev: Custom Themes with jQuery Mobile<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/build-websites-apps-jquery-mobile-custom-themes.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-11034 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/build-websites-apps-jquery-mobile-custom-themes.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Mobile App Design\/Dev: Custom Themes with jQuery Mobile<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn our earlier jQuery Mobile tutorial I had introduced much of the underlying framework and how to go...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Features & OS Support<\/h2>\n<p>The reason I suggest learning jQuery Mobile over any other frameworks is simplicity. The code was built on the jQuery core and had an active team of developers writing scripts and editing bugs. Of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/demos\/1.0rc2\/docs\/about\/features.html\">many features<\/a> include HTML5 support, Ajax-powered navigation links, and touch\/swipe event handlers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg\" width=\"500\" height=\"406\" alt=\"jquery mobile features & os support\"><\/figure>\n<p>Support is varying between phones and is broken into a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/gbs\/\">chart of 3 categories<\/a> from A-C. A is the top tier which boasts full support of jQuery Mobile, B has everything except Ajax while C is basic HTML with little-to-no JavaScript. Luckily most of the popular operating systems are fully supported \u2013 I added a list below of just a few examples.<\/p>\n<ul>\n<li>Apple iOS 3-5<\/li>\n<li>Android 2.1, 2.2, 2.3<\/li>\n<li>Windows Phone 7<\/li>\n<li>Blackberry 6.0, Blackberry 7<\/li>\n<li>Palm WebOS 1.4-2.0, 3.0<\/li>\n<\/ul>\n<p>If you want to learn more try reading up on their <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/demos\/1.0rc2\/\">official docs<\/a> page. It\u2019s not written in gibberish and actually feels very easy to follow along. Now let\u2019s focus on the basics of writing a jQuery mobile page and how we can build a small application!<\/p>\n<h2>The Standard HTML Template<\/h2>\n<p>To get your first mobile app working, there is a set template you should start with. This includes the jQuery base code along with the mobile JS and CSS, all externally hosted from the jQuery CDN. Check out my example code below.<\/p>\n<pre>\r\n &lt;!DOCTYPE html&gt;\r\n &lt;html&gt; \r\n &lt;head&gt; \r\n &lt;title&gt;Basic mobile app&lt;\/title&gt; \r\n &lt;meta charset=\"utf-8\"&gt; \r\n &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt; \r\n &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"&gt; \r\n \r\n &lt;link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/mobile\/1.0rc2\/jquery.mobile-1.0rc2.min.css\"&gt;\r\n &lt;script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.6.4.min.js\"&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/mobile\/1.0rc2\/jquery.mobile-1.0rc2.min.js\"&gt;&lt;\/script&gt;\r\n &lt;\/head&gt; \r\n &lt;body&gt; \r\n \r\n &lt;\/body&gt;\r\n &lt;\/html&gt;\r\n <\/pre>\n<p>The only foreign elements here should be the two meta tags. The top <code>viewport<\/code> tag updates mobile browsers to use a full zoom effect. Setting the value <code>width=device-width<\/code> will set the page width at exactly the width of the phone screen. And best of all, it doesn\u2019t disable the zoom features since jQuery Mobile can adapt to shifting layouts.<\/p>\n<p>The next meta tag <code>X-UA-Compatible<\/code> just forces Internet Explorer to render the HTML in it\u2019s most recent iteration. Older browsers and especially mobile, will try to get around unfamiliar rendering bugs.<\/p>\n<h3>Constructing the Body Content<\/h3>\n<p>Now, this is where jQuery mobile can get tricky. Each HTML page isn\u2019t necessarily 1 page on the mobile site. The framework uses HTML5\u2019s data attributes, which you can create at a whim by appending <code>data-<\/code> beforehand. In a similar fashion <code>data-role=\"page\"<\/code> can be set to multiple divs in a single HTML file, giving you more than one page.<\/p>\n<p>You would then move between these pages with anchor links and a unique ID. This setup is a good idea for basic, simple apps. If you only need 3-5 pages, then why not store it all in a single file? Unless you have a lot of written content, in which case try using PHP includes to save time.<\/p>\n<p>Check the code example below if you\u2019re lost.<\/p>\n<pre>\r\n &lt;body&gt;\r\n &lt;div data-role=\"page\" id=\"index\"&gt;\r\n &lt;header data-role=\"header\"&gt;\r\n &lt;h1&gt;Top title bar&lt;\/h1&gt;\r\n &lt;\/header&gt;\r\n \r\n &lt;div data-role=\"content\"&gt;\r\n &lt;h3&gt;Show another page??&lt;\/h3&gt;\r\n &lt;p&gt;hint: click the button below!&lt;\/p&gt;\r\n &lt;p&gt;&lt;a href=\"#about\" data-role=\"button\" data-theme=\"c\"&gt;About us&lt;\/a&gt;&lt;\/p&gt;\r\n &lt;\/div&gt;\r\n \r\n &lt;footer data-role=\"footer\"&gt;\r\n &lt;h2&gt;&copy; footer here.&lt;\/h2&gt;\r\n &lt;\/footer&gt;\r\n &lt;\/div&gt;\r\n \r\n &lt;div data-role=\"page\" id=\"about\"&gt;\r\n &lt;header data-role=\"header\"&gt;\r\n &lt;h1&gt;Page 2 Here&lt;\/h1&gt;\r\n &lt;\/header&gt;\r\n \r\n &lt;div data-role=\"content\"&gt;\r\n &lt;p&gt;just some extra content as well.&lt;\/p&gt;\r\n &lt;p&gt;I mean, you can &lt;a data-rel=\"back\" href=\"#index\"&gt;go back&lt;\/a&gt; at any time.&lt;\/p&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;\/body&gt;\r\n &lt;\/html&gt;\r\n <\/pre>\n<p>Take a look at the anchor link from the index page for a moment. Notice I added the attribute <code>data-role=\"button\"<\/code> to set up the link as a button. But instead of using the default styles we include <code>data-theme=\"c\"<\/code>. This switches between 1 of 5(themes a-e) templates which come packaged by default as CSS styles within jQ Mobile.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/test\/docs\/api\/themes.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-themed-buttons.jpg\" alt=\"jQuery Mobile 5 CSS themes A-E on buttons\" width=\"500\" height=\"225\"><\/a><\/p>\n<p>My button also spans the entire page width. To remove the behavior, we need to set the element from block to inline display. The attribute for doing this is <code>data-inline=\"true\"<\/code> which you could append onto any anchor button.<\/p>\n<h2>Header and Footer Bars<\/h2>\n<p>Along the very top and bottom of your applications, you should append header and footer content. This design style is often attributed to iOS apps which first became popular using Apple\u2019s mobile App Store. jQ Mobile uses attributes of data-role to define the header, footer, and page content. Let\u2019s take a brief look at these areas.<\/p>\n<h3>Top Bar Buttons<\/h3>\n<p>By default, the top bar supports a set of two(2) links in a similar fashion to other mobile apps. iOS defaults to using a \u201cback\u201d button to the left and often an \u201coptions\u201d or \u201cconfig\u201d on the right.<\/p>\n<pre>\r\n &lt;div data-role=\"page\" id=\"about\" data-add-back-btn=\"true\"&gt;\r\n &lt;header data-role=\"header\"&gt;\r\n &lt;a href=\"index.html\" data-icon=\"gear\" data-theme=\"b\" class=\"ui-btn-right\"&gt;Settings&lt;\/a&gt;\r\n &lt;h1&gt;Page 2 Here&lt;\/h1&gt;\r\n &lt;\/header&gt;\r\n <\/pre>\n<p>The code above is just focusing on the div container for our About page along with header content. The additional HTML attribute <code>data-add-back-btn=\"true\"<\/code> will only work when added onto a page data role. The purpose is to automatically include a back button which works similar to your browser\u2019s back button.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-tabs-back-button.jpg\" alt=\"example of jQuery mobile back button UI\" width=\"500\" height=\"219\"><\/figure>\n<p>We could have added a back button manually with similar code as we used in the content area. But I feel this takes a lot longer to set up, especially on multiple pages. All anchor links within the header section will default into left\/right button positions. By using <code>class=\"ui-btn-right\"<\/code> this re-positioned my Settings button so there is free space for the back button. Also, I\u2019m using the secondary theme styles to give it some extra spunk!<\/p>\n<h3>Footer Navigation<\/h3>\n<p>The footer area may not feel very useful at first. It\u2019s a place where you can store copyright stuff and more important links, but this could just as easily be added at the bottom of your content area. So what good is using the footer?<\/p>\n<p>Well the best example I\u2019ve seen utilizes footer space as a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/demos\/1.0rc2\/docs\/toolbars\/footer-persist-a.html\">navigation system<\/a> where tab links appear to control the page navigation. There are plenty of options where you can select fullscreen effects, add icons, adjust placement, and a few other attributes as well. But let\u2019s just build a simple footer nav with three buttons to get an idea of how this works.<\/p>\n<ul class=\"download\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/demo1\/index.html\">Preview Live Demo<\/a> <\/li>\n<\/ul>\n<pre>\r\n &lt;footer data-role=\"footer\" class=\"ui-body-b\"&gt;\r\n &lt;div data-role=\"navbar\"&gt;\r\n &lt;ul&gt;\r\n &lt;li&gt;&lt;a href=\"#index\" data-direction=\"reverse\"&gt;App Homescreen!&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;li&gt;&lt;a href=\"https:\/\/www.google.com\/\" data-rel=\"nofollow\"&gt;Google Me&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;li&gt;&lt;a href=\"https:\/\/www.hongkiat.com\/\" data-rel=\"nofollow\"&gt;Hongkiat Blog&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n &lt;\/div&gt;\r\n &lt;\/footer&gt;\r\n <\/pre>\n<p>So here is some footer code for the about page section. <code>data-role=\"navbar\"<\/code> should be added onto the container element housing an unordered list and NOT the UL element itself. Each link within the list is treated as a tab bar, which then gets equally divided based on the total number of links. The additional class of <code>ui-body-b<\/code> just adds aesthetic effects as we switch between the few available styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/ios-path-app-nav-bar.jpg\" alt=\"iOS Bottom Tabbed nav bar - Path Inc.\" width=\"500\" height=\"187\"><\/figure>\n<p>If you notice on the first button I have the attribute <code>data-direction=\"reverse\"<\/code>. Even though I could use the back button setup as before to return to the home page, I\u2019ve instead used the page ID of <strong>#index<\/strong>. By default the app window will transition to the right, which looks pretty tacky since you expect the animation to move backward. You can play around with even more of these animated effects if you have time. Check out the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquerymobile.com\/demos\/1.0rc2\/docs\/pages\/page-transitions.html\">transitions info page<\/a> in the jQuery documentation.<\/p>\n<h2>Ajax & Dynamic Pages<\/h2>\n<p>The first segment has really opened up the key points to building a mobile app with jQuery. But I want to start a new app that loads data from an external page. I\u2019ll be using a very simple PHP script to attain the <code>$_REQUEST[]<\/code> variable and display a small <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/\">Dribbble shot<\/a> accordingly. The screenshot below should give you an idea what we are going to build.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/dynamic-pages-demo.jpg\" width=\"500\" height=\"286\" alt=\"ajax dynamic pages\"><\/figure>\n<p>First, I\u2019ll make an index.html page set on the default template. For this home screen, I\u2019m using a list view setup to display each link in order. This is done in the content area with a <code>data-role=\"listview\"<\/code> attribute on the list container. Cutting out the same header stuff as before, I added all my code from this new index page below.<\/p>\n<pre>\r\n &lt;body&gt; \r\n &lt;div data-role=\"page\" id=\"img-listing\"&gt;\r\n &lt;header data-role=\"header\"&gt;\r\n &lt;h1&gt;October 2011 Shots&lt;\/h1&gt;\r\n &lt;\/header&gt;\r\n \r\n &lt;div data-role=\"content\"&gt;\r\n &lt;ul data-role=\"listview\" data-theme=\"c\"&gt;\r\n &lt;li&gt;&lt;a href=\"image.php?imgid=1\"&gt;First image&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;li&gt;&lt;a href=\"image.php?imgid=2\"&gt;Second image&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;li&gt;&lt;a href=\"image.php?imgid=3\"&gt;Third image&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;li&gt;&lt;a href=\"image.php?imgid=4\"&gt;Fourth image&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n &lt;\/div&gt;\r\n \r\n &lt;footer data-role=\"footer\"&gt;&lt;h3&gt;www.dribbble.com&lt;\/h3&gt;&lt;\/footer&gt;\r\n &lt;\/div&gt;\r\n &lt;\/body&gt;\r\n &lt;\/html&gt;\r\n <\/pre>\n<p>Each anchor link in my list viewpoint to the same file \u2013 index.php. But we\u2019re passing in the parameter <code>imgid<\/code> as a request variable. On the <em>image.php<\/em> file, we take the ID and test it against four preset values. If any match up, we use the matching image URL and title; otherwise, we just display a default Dribbble shot.<\/p>\n<h3>Image Loader Script<\/h3>\n<p>The image.php script still has the default jQuery mobile template added into the code. It actually shares a very similar header and footer, except for the addition of our backlink attribute <code>data-add-back-btn=\"true\"<\/code>. Notice this button will only show up if we come from index.html first! Try directly loading image.php and nothing will appear since there\u2019s no \u201cback\u201d to move to.<\/p>\n<p>I think we can make a bit more sense of the code by examining my PHP logic first. We use a <code>switch<\/code> \/ <code>case<\/code> method to check against the 4 different IDs and provide a header title, image URL, and original artist source link.<\/p>\n<pre>&lt;?php\r\n $theid = $_REQUEST['imgid'];\r\n \r\n switch($theid) {\r\n case 1:\r\n $heading = \"Wunderkit\";\r\n $origin = \"https:\/\/dribbble.com\/shots\/297593-Wunderkit-tasks\";\r\n $source = \"wunderkit.png\";\r\n break;\r\n case 2:\r\n $heading = \"College\";\r\n $origin = \"https:\/\/dribbble.com\/shots\/298643-Colleeeeeeeeeeeeege\";\r\n $source = \"college.jpg\";\r\n break;\r\n case 3:\r\n $heading = \"Forum app\";\r\n $origin = \"https:\/\/dribbble.com\/shots\/298649-Forum-app-for-Facebook\";\r\n $source = \"forum-app.jpg\";\r\n break;\r\n case 4:\r\n $heading = \"Twitter\";\r\n $origin = \"https:\/\/dribbble.com\/shots\/298069-Twitter\";\r\n $source = \"twitter.png\";\r\n break;\r\n default:\r\n $heading = \"Abandoned lighthouse\";\r\n $origin = \"https:\/\/dribbble.com\/shots\/298615-Abandoned-lighthouse\";\r\n $source = \"lighthouse.jpg\";\r\n }\r\n ?&gt;\r\n <\/pre>\n<p>All seems fairly straightforward \u2013 even a novice PHP dev should be able to follow along! And if you don\u2019t understand, it\u2019s not important to the jQuery code anyway, so don\u2019t worry. We should switch now and take a look at the template I\u2019ve built within this new page. All the HTML code is added after that whole PHP block above. I used the ID of \u201cimages\u201d for the container and even set up the header to change with each new photo.<\/p>\n<pre>\r\n &lt;div data-role=\"page\" id=\"images\" data-add-back-btn=\"true\"&gt;\r\n &lt;header data-role=\"header\"&gt;\r\n &lt;h1&gt;&lt;?php echo $heading; ?&gt;&lt;\/h1&gt;\r\n &lt;\/header&gt;\r\n \r\n &lt;div data-role=\"content\"&gt;\r\n &lt;p&gt;&lt;strong&gt;&lt;a href=\"&lt;?php echo $origin; ?&gt;\" data-rel=\"nofollow\"&gt;View the Original&lt;\/a&gt;&lt;\/strong&gt;&lt;\/p&gt;\r\n &lt;p&gt;&lt;a href=\"&lt;?php echo $origin; ?&gt;\" data-rel=\"nofollow\"&gt;&lt;img src=\"img\/&lt;?php echo $source; ?&gt;\" \/&gt;&lt;\/a&gt;&lt;\/p&gt;\r\n &lt;\/div&gt;\r\n \r\n &lt;footer data-role=\"footer\"&gt;&lt;h3&gt;www.dribbble.com&lt;\/h3&gt;&lt;\/footer&gt;\r\n &lt;\/div&gt;\r\n <\/pre>\n<p>You can probably see how simplistic this demo is. But the whole purpose is to demonstrate the scalability of jQuery mobile. PHP can easily be added into the mix, and you can churn out some really neat apps with just a few hours of development.<\/p>\n<h2>Fancy Design with List Thumbnails<\/h2>\n<p>One last added effect we can implement is the use of thumbnails to liven up the listing page. I\u2019m also going to split the text into a heading and description box to display both the artwork title and the artist\u2019s name.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/dribbble-image-browser-app-preview.jpg\" alt=\"jQuery Mobile app preview - image browser\" width=\"500\" height=\"387\"><\/figure>\n<p>To begin open up Photoshop and create an 80\u00d780 px document. I\u2019m going to quickly re-size each image and save thumbnails from matching each one. Then update the list view items we should include a few more elements.<\/p>\n<p>Check out the code below to see what I mean.<\/p>\n<pre>\r\n &lt;div data-role=\"content\"&gt;\r\n &lt;ul data-role=\"listview\" data-theme=\"c\"&gt;\r\n &lt;li&gt;&lt;a href=\"image.php?imgid=1\"&gt;\r\n &lt;img src=\"img\/wunderkit-t.png\" class=\"ui-li-thumb\" \/&gt;\r\n &lt;h3 class=\"ui-li-heading\"&gt;Wunderkit tasks&lt;\/h3&gt;\r\n &lt;p class=\"ui-li-desc\"&gt;by Sebastian Scheerer&lt;\/p&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n \r\n &lt;li&gt;&lt;a href=\"image.php?imgid=2\"&gt;\r\n &lt;img src=\"img\/college-t.jpg\" class=\"ui-li-thumb\" \/&gt;\r\n &lt;h3 class=\"ui-li-heading\"&gt;Colleeeeeeeeeeeeege&lt;\/h3&gt;\r\n &lt;p class=\"ui-li-desc\"&gt;by Scott Hill&lt;\/p&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n \r\n &lt;li&gt;&lt;a href=\"image.php?imgid=3\"&gt;\r\n &lt;img src=\"img\/forum-app-t.jpg\" class=\"ui-li-thumb\" \/&gt;\r\n &lt;h3 class=\"ui-li-heading\"&gt;Forum app for Facebook&lt;\/h3&gt;\r\n &lt;p class=\"ui-li-desc\"&gt;by Ionut Zamfir&lt;\/p&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n \r\n &lt;li&gt;&lt;a href=\"image.php?imgid=4\"&gt;\r\n &lt;img src=\"img\/twitter-t.png\" class=\"ui-li-thumb\" \/&gt;\r\n &lt;h3 class=\"ui-li-heading\"&gt;Twitter&lt;\/h3&gt;\r\n &lt;p class=\"ui-li-desc\"&gt;by Sam Jones&lt;\/p&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n &lt;\/div&gt;\r\n <\/pre>\n<p>The classes for <code>ui-li-heading<\/code> and <code>ui-li-desc<\/code> are added by default into the jQuery Mobile stylesheet. This is similar to the image class <code>ui-li-thumb<\/code>, which automatically re-sizes each list view bar according to the image height. Now from here, you could build more on the frontend with animations, page effects, stylesheets, etc.<\/p>\n<p>Alternatively, you could begin constructing a backend system to upload new images and automatically trim thumbnails to include in the list. There is so much flexibility with jQuery Mobile you almost can\u2019t label it solely as a JavaScript library. It\u2019s more of an entire HTML5\/CSS\/jQuery framework for building quick and scalable mobile apps.<\/p>\n<h2>Conclusion<\/h2>\n<p>As of writing this article, the jQuery Mobile team has officially put out RC1.0 of the code library. This means most if not all of the major bug fixes have been squashed, and now testers are gearing up for a full release. Because of this, you won\u2019t find a whole lot of information on the web.<\/p>\n<p>But as the month\u2019s advance, web developers are sure to pick up on the trend. Mobile applications and even mobile web layouts are growing in popularity with the huge increase in smartphones. Web developers don\u2019t have the time to learn a full programming language for building Android\/iOS apps. Thus jQuery Mobile is a slim alternative that includes support for most of the mobile industry software and continues growing daily with an active developer community.<\/p>","protected":false},"excerpt":{"rendered":"<p>Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we\u2019ve seen tremendous growth in browser and OS support for mobile websites. Most notably, Apple\u2019s iOS and Google\u2019s Android platforms come to mind. But others such as PalmOS and Blackberry are still in the mix. Up until recently, it&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,3399,352],"tags":[911,2501,205,360],"topic":[4520,4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Beginner&#039;s Guide to jQuery Mobile to Mobile App Development - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we&#039;ve seen tremendous growth in browser and OS support for mobile\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner&#039;s Guide to jQuery Mobile to Mobile App Development\" \/>\n<meta property=\"og:description\" content=\"Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we&#039;ve seen tremendous growth in browser and OS support for mobile\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-17T13:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:44:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Beginner&#8217;s Guide to jQuery Mobile to Mobile App Development\",\"datePublished\":\"2012-01-17T13:01:10+00:00\",\"dateModified\":\"2025-04-03T16:44:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/\"},\"wordCount\":1918,\"commentCount\":37,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/website-with-jquery-mobile\\\/jquery-mobile-support.jpg\",\"keywords\":[\"jQuery\",\"self-learning\",\"web apps\",\"website\"],\"articleSection\":[\"Coding\",\"Mobile\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/\",\"name\":\"Beginner's Guide to jQuery Mobile to Mobile App Development - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/website-with-jquery-mobile\\\/jquery-mobile-support.jpg\",\"datePublished\":\"2012-01-17T13:01:10+00:00\",\"dateModified\":\"2025-04-03T16:44:39+00:00\",\"description\":\"Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we've seen tremendous growth in browser and OS support for mobile\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/website-with-jquery-mobile\\\/jquery-mobile-support.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/website-with-jquery-mobile\\\/jquery-mobile-support.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-websites-apps-jquery-mobile\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner&#8217;s Guide to jQuery Mobile to Mobile App Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner's Guide to jQuery Mobile to Mobile App Development - Hongkiat","description":"Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we've seen tremendous growth in browser and OS support for mobile","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/","og_locale":"en_US","og_type":"article","og_title":"Beginner's Guide to jQuery Mobile to Mobile App Development","og_description":"Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we've seen tremendous growth in browser and OS support for mobile","og_url":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-01-17T13:01:10+00:00","article_modified_time":"2025-04-03T16:44:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Beginner&#8217;s Guide to jQuery Mobile to Mobile App Development","datePublished":"2012-01-17T13:01:10+00:00","dateModified":"2025-04-03T16:44:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/"},"wordCount":1918,"commentCount":37,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg","keywords":["jQuery","self-learning","web apps","website"],"articleSection":["Coding","Mobile","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/","url":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/","name":"Beginner's Guide to jQuery Mobile to Mobile App Development - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg","datePublished":"2012-01-17T13:01:10+00:00","dateModified":"2025-04-03T16:44:39+00:00","description":"Note: This post was first published on the 17th Jan, 2012. Over the past 2-3 years, we've seen tremendous growth in browser and OS support for mobile","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/website-with-jquery-mobile\/jquery-mobile-support.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/build-websites-apps-jquery-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Beginner&#8217;s Guide to jQuery Mobile to Mobile App Development"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2Rq","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=11000"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11000\/revisions"}],"predecessor-version":[{"id":73512,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/11000\/revisions\/73512"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=11000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=11000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=11000"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=11000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}