jQuery Mobile Quick Start

by on September 24, 2012 12:57 pm

jQuery Mobile is a HTML5-based UI system built on the jQuery Javascript library and jQuery UI. It is lightweight, flexible, and easy to use with all mobile device platforms. 

Depending on which particular report you read, you probably have less than two years before mobile visits will outnumber typical desktop visits. Can your website meet the demands of your mobile visitors by next year? Does your website have the capabilities you need to begin working with a mobile website today?  Let’s take a look at the basics of jQuery Mobile so that you can be ready.

Index Page:

I’m not one to put together an example that doesn’t really do anything, so let’s start with a simplified index page that I put together for the Ozarktrail.com website as a demo: http://Ozarktrail.com/mobile.

Do keep in mind that what you put on your mobile site will not be quite the same as what displays on your desktop website, but I will not go into that today.


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Ozark Trail - Home
      		<link href="themes/theme.min.css" rel="stylesheet" />
      		<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script></pre>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>The Ozark Trail</h1>
</div>
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-filter="true">
	<li><a href="trail.php">Trail Sections</a></li>
	<li><a href="maps.php">Detailed Maps</a></li>
	<li><a href="conditions.php">Trail Conditions</a></li>
</ul>
</div>
</div>
<pre>

In the <head> section, a meta “viewport” tag sets the screen width to the pixel width of the device. I used ThemeRoller for Mobile to build a custom mobile-themed stylesheet.  And script tags for jQuery and jQuery Mobile references are added (jQuery Mobile 1.1 works with both 1.6.4 and 1.7.1 versions of jQuery core).

In the body, a <div> with data-role=”page” is used to define the page, and the header bar (data-role=”header”) and content region (data-role=”content”) are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes and used throughout jQuery Mobile to turn basic markup into an “enhanced and styled widget”.

Next I added a listview within the data-role=”content” <div>. jQuery Mobile includes many options for listviews  and you can add a dynamic search filter using data-filter=”true”.

Here is a screen-shot of the first page:

Ozark Trail

 

Details Page:

Next let’s look at a simplified version of a details page (conditions.php), which has some dynamic content:

<!--?php    require_once('dbconn.php');    mysql_select_db($database_name, $link_identifier);    $query = "select * from trailconditions ";    $results = mysql_query($query, $link_identifier) or die(mysql_error());    ?-->

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Ozark Trail - Trail Conditions
      	<link href="themes/ot-theme.min.css" rel="stylesheet" />
      	<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

</pre>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Trail Conditions</h1>
</div>
<div data-role="content" data-theme="a">
<a href="index.php" data-role="button" data-icon="home">Home</a>
<div style="color: #ecd487;">
 <!--?php while ($row = mysql_fetch_assoc($results)) { ?-->
<strong><!--?php echo $row['trailsection']; ?--> - <!--?php echo $row['trailstatus']; ?--></strong>

 <!--?php echo $row['conditiondesc']; ?-->
</div>
</div>
</div>
<pre>

Starting with the template from the index.php, add some simple php to connect to your database and get some data.

In the body section data-role=”content” <div> I added a Home button data-role=”button” to link back to the index.php page, and added a basic loop to display the trail section, status, and trail conditions description.

I have kept this example as simplified as possible to concentrate on the jQuery Mobile aspects, but I would suggest a Model-View-Controller (MVC) approach so the model and controller for your current website can be reused with a new mobile view page. A nice two part example for using PHP, MySQL, and jQuery Mobile with the MVC pattern can be found at tutorialzine.com.
Part 1 link: http://tutorialzine.com/2011/08/jquery-mobile-product-website/
Part 2 link: http://tutorialzine.com/2011/08/jquery-mobile-mvc-website-part-2/

Here is a screen-shot of the second page:

Ozark Trail 2

 

Hopefully this gives you just a hint of what jQuery Mobile has to offer and what can be done with just a little effort.  Check out jquerymobile.com for much, much more and take a look at jquerymobile.com/demos for documentation, demos, and to get started.

– Todd Horn, asktheteam@keyholesoftware.com

  • Share:

Leave a Reply

Things Twitter is Talking About
  • JSF components can be used to quickly bring up a user interface. Here's a quick example using #ICEFaces: http://t.co/5YCOtIy2HE
    April 24, 2014 at 11:35 AM
  • Signed up for Keyhole's free monthly tech newsletter yet? Latest resources compiled to a quick email. Sign up here: http://t.co/F8h0NSiicZ
    April 24, 2014 at 10:35 AM
  • code smell: dev practices that leave a stench of inexperience. Avoid it in method implementation with these tips - http://t.co/b7A884BnXb
    April 23, 2014 at 9:20 PM
  • Tech Night is now! Mark D is presenting to the group on #Grunt 101. Good technology talk, food & team makes for a fantastic night.
    April 23, 2014 at 5:10 PM
  • Single Page Application architectures allow for rich, responsive UIs. #JavaScript is a must-know for SPA - http://t.co/6sfk3kt1k3 #tutorial
    April 23, 2014 at 2:15 PM
  • Vacuole #Encapsulation aims to minimize the code necessary for routinely verbose data tasks -http://t.co/fJQzz731rZ
    April 23, 2014 at 9:45 AM
  • DYK? We translate our hands-on experience to custom courses to train your dev teams. Our new course on #AngularJS: http://t.co/Bf3UuClj4Z
    April 23, 2014 at 8:45 AM
  • Interested in #Backbone & #Marionette but not sure where to start? Check out the Marionette-Require-Boilerplate: http://t.co/XDj43BwSS3 #SPA
    April 22, 2014 at 4:50 PM
  • Responsive Design can help in giving your users a consistent app experience across devices. Quick tutorial - http://t.co/BDrT5LvgRo
    April 22, 2014 at 2:31 PM
  • Tips & tricks to save time in the #Eclipse IDE - http://t.co/uGgCkchwNk (keystroke combos, navigation, time tracking & more)
    April 22, 2014 at 8:40 AM
  • Join us! Looking to add to our team a developer w/ advanced #JavaScript & #NodeJS exp (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 21, 2014 at 7:35 PM
  • Looking into #ExtJS but don't know where to start? Check out our video tutorial series to find your way around - http://t.co/XFYDT6YNWA
    April 21, 2014 at 4:35 PM
  • We've been tinkering with JS library Famo.us since its public release 4/10. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 21, 2014 at 2:03 PM
  • RT @CompSciFact: Rivest, Shamir, and Adleman published the RSA public key cryptography algorithm in 1978.
    April 21, 2014 at 11:13 AM
  • DYK? When we share/RT/blog/etc, it doesn't mean that Keyhole endorses it - we just like variety of opinions! Info: http://t.co/MXhB9lE9tV
    April 19, 2014 at 3:01 PM
  • A huge welcome to Justin Graber who joined the Keyhole team this week!
    April 18, 2014 at 3:25 PM
  • Pssst... @kc_dc early bird pricing ends on Sunday. Shoot us a note if you want to save 10% off of your ticket with our sponsor promo code!
    April 18, 2014 at 2:49 PM
  • Join our team! Looking for a developer w/ advanced #JavaScript & #NodeJS experience (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 18, 2014 at 11:21 AM
  • .@befamous has huge potential to make HTML5/JS/CSS web pages feel as native apps. Here's our inital tech takeaways - http://t.co/S77TSKHDKd
    April 18, 2014 at 9:50 AM
  • Why to use AngularUI Router instead of ngRoute - http://t.co/tBnj5ZCkOw
    April 17, 2014 at 7:55 PM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2013 Keyhole Software, LLC. All rights reserved.